The Nuba issue of blocking? What's the right thing to do?



  • There's this simple design:

    .container {
      width: 100%;
      max-width: 1024px;
      margin: 0 auto;
    }
    .block1 {
      width: 34%;
      height: 100px;
      border: 1px solid red;
      display: inline-block;
    }
    .block2 {
      width: 62%;
      height: 100px;
      border: 1px solid blue;
      display: inline-block;
    }
    @media only screen and (min-width: 480px) and (max-width: 767px) {
      .block1 {
        width: 100%;
      }
      .block2 {
        width: 100%;
      }
    }
    <div class="container">
      <div class="block1"></div>
      <div class="block2"></div>
    </div>

    If the screen was reduced, it would be necessary to move first. block2bootstrapFor example, I know how to do this.



  • This can be done with flexbox, that's the nature of the order.


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2