Four horizontally aligned divs split into two on smaller screen size

Question

Apologies if this has been answered before.

I have four horizontally aligned divs, each containing an img and text.

box box box box

When I reduce the screen size, I want these to split down the middle, to give me:

box box
box box

Instead of what I'm currently getting:

box box box
    box

Currently, when I reduce the screen size further, they do stack as 2x2, splitting to a vertical layout on very small screens (which they still need to do).

js fiddle here: https://jsfiddle.net/zyrkstnk/

Any ideas? I've messed around with &nbsp but can't get it to work. Thanks!

Answer 1

#homethumbs {
 width: 100%;
 text-align: center;
}

.homethumb {
 width: 300px;
}
.homethumb, .wrap {
 display: inline-block;
}

<div id="homethumbs">
    <div class="wrap">
        <div class="homethumb">
            <img src="http://placehold.it/250x250">
            <h2>Start here with the basics</h2>
        </div>
        <div class="homethumb">
            <img src="http://placehold.it/250x250">
            <h2>Start here with the basics</h2>
        </div>
    </div>
    <div class="wrap">
        <div class="homethumb">
            <img src="http://placehold.it/250x250">
            <h2>Start here with the basics</h2>
        </div>
        <div class="homethumb">
            <img src="http://placehold.it/250x250">
            <h2>Start here with the basics</h2>
        </div>
    </div>
</div>

Answer 2

You should try flex!

#homethumbs {
    width: 100%;
    text-align: center;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-flow: wrap;
    -webkit-flex-flow: wrap;
    flex-flow: wrap;
}

.homethumb {
      flex: 0 0 50%;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;  
}

@media (min-width: 1000px){

  .homethumb {
       flex: 0 0 25%;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;  
  }

}

Don't forget to put in viewport meta tag. Here is the video of this result: http://www.screencast.com/t/lYV6tFvhn9

Answer 3

You can use flex for the same and for smaller devices you can set each divs width to be 50% and set flex-wrap :wrap by this you can achieve 2*2 grid

check this snippet

#homethumbs {
  display: flex;
}
@media (min-width: 200px) and (max-width: 1000px) {
  #homethumbs {
    flex-wrap: wrap;
    width: 100vw;
    border: 1px solid;
  }
  .homethumb {
    width: 50vw;
  }
}

<div id="homethumbs">
  <div class="homethumb">
    <img src="http://placehold.it/250x250">
    <h2>Start here with the basics</h2>
  </div>





  <div class="homethumb">
    <img src="http://placehold.it/250x250">
    <h2>Start here with the basics</h2>
  </div>



  <div class="homethumb">
    <img src="http://placehold.it/250x250">
    <h2>Start here with the basics</h2>
  </div>



  <div class="homethumb">
    <img src="http://placehold.it/250x250">
    <h2>Start here with the basics</h2>
  </div>
</div>

Hope this helps