setting content in medium size device - bootstrap - html

Question

i'm creating a grid of two rows, first one would be the sidebar and the other one (with other two rows in his inside) is the main content:
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-align-self-center sidebar" style="border-right: 5px solid #b3daff ">
<ul>
<li><button style="border:1px solid #9dbbe4;" class="change-button" id="change-order" onclick="change()" type="button">Start Moving</button></li>
<li><button style="border:1px solid #9dbbe4;" class="change-button" onclick="stop()" type="button">Stop Moving</button></li>
<li><button style="border:1px solid #9dbbe4;" class="change-button" onclick="hide()" type="button">Hide Elements</button></li>
<li><button style="border:1px solid #9dbbe4;" class="change-button" onclick="hide()" type="button">Hide Elements</button></li>
<li><button style="border:1px solid #9dbbe4;" class="change-button" onclick="restore()" type="button">Restore Elements</button></li>
<li><button style="border:1px solid #9dbbe4;" class="change-button" onclick="zoom()" type="button">Zoom In</button></li>
<li><button style="border:1px solid #9dbbe4;" class="change-button" onclick="resize()" type="button">Zoom Out</button></li>
</ul>
</div>
<div class="col-md-10 main-content">
<div class="row"> <!--first row -->
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="box" style="order:1">
<img class="meeseks" src="img/meeseks_purple.jpg" />
<div class="button-box">
<button style="background-color:#BA69B6;border:4px solid #BA69B6" class="button" type="button">Pick Up My Color!</button>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="box" style="order:2">
<img class="meeseks" src="img/meeseks_purple.jpg" />
<div class="button-box">
<button style="background-color:#BA69B6;border:4px solid #BA69B6" class="button" type="button">Pick Up My Color!</button>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="box" style="order:3">
<img class="meeseks" src="img/meeseks_purple.jpg" />
<div class="button-box">
<button style="background-color:#BA69B6;border:4px solid #BA69B6" class="button" type="button">Pick Up My Color!</button>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="box" style="order:4">
<img class="meeseks" src="img/meeseks_purple.jpg" />
<div class="button-box">
<button style="background-color:#BA69B6;border:4px solid #BA69B6" class="button" type="button">Pick Up My Color!</button>
</div>
</div>
</div>
</div>
<div class="row"> <!--second row -->
<div class="col-md-3">col</div>
<div class="col-md-3">col</div>
<div class="col-md-3">col</div>
<div class="col-md-3">col</div>
</div>
</div>
</div>
</div>
working well on xs device and sm device. But in some resolution for md device (like 1024x768 ) the images dont have the correct spacing and overflow their wrapper. How can i solve?
Thanks in advance

Answer 1

ok, i had forgotten the overflow property, now when i resize the page the images dont overflow they div box. The effect is not so nice, but is much better.