jony jony - 7 months ago 20
CSS Question

Change inline element's behavior when resizing page

When resizing the page horizontally (shrinking its width), section 3 should move under section 2 (and only after that should they form a single column).
This is easier to explain visually. What I'm aiming for is this:

(1: full width)
1111 2222 3333
1111

(2: half width - the part I'm having trouble with)
1111 2222
1111 3333

(3: min width)
1111
1111
2222
3333


Here's a fiddle with my example.
As you can see, at half width, sections 2 and 3 instantly move bellow section 1 - without 3 moving beneath 2 first! Any insights on how to fix this?

Answer Source

You can use media query to check in half width (ex 768px), change display of child block (column 2 & 3) to display: block

Example https://jsfiddle.net/robinhuy/pp04Lmh4/1/

.block {
  display: inline-block;
}

.p2 {
  padding: 2px;
}

.vtop {
  vertical-align: top;
}

@media (max-width: 768px) {
  .child-block {
    display: block;
  }
}
<div class="block">
  <div class="block p2">
          <div>1111111111111111111111</div>
          <div>1111111111111111111111</div>
          <div>1111111111111111111111</div>
          <div>1111111111111111111111</div>
          <div>1111111111111111111111</div>
          <div>1111111111111111111111</div>
  </div>
  <div class="block vtop">
    <div class="block p2 child-block">
            <div>22222222222222222222</div>
            <div>22222222222222222222</div>
            <div>22222222222222222222</div>
    </div>
    <div class="block p2 child-block">
            <div>333333333333333333333</div>
            <div>333333333333333333333</div>
            <div>333333333333333333333</div>
    </div>
  </div>
</div>