I'm trying to make a responsive grid. The grid starts out as a 4x3, when I reach 720px, I want it to be a 3x4 grid. I'm using bootstrap 3 (can't use bootstrap 4 for this project). Now I'm able to do this using javascript, but I would like to do this with pure html and css.
Going from...
A B C DE F G HI J K L
to... @media only screen and (min-width: 720px)
A B CD E FG H IJ K L
I realize you need rows in between, which is the reason I added it dynamically using javascript. When it is there statically, I couldn't figure out how to do this.
function gridDivideBy(divideNum) {$('.myClass').contents().unwrap();var $square = $(".square");for (let i = 0; i < $square.length; i += divideNum) {// Create dynamic divlet $div = $("<div/>", {class: 'myClass row'});// Wrap all the boxes inside a row and div with myClass$square.slice(i, i + divideNum).wrapAll($div);}}function myFunc(x) {if (x.matches) {gridDivideBy(4);} else {gridDivideBy(3);}}var x = window.matchMedia("(min-width: 720px)")myFunc(x);x.addListener(myFunc);.square {flex: 1;padding: 5px;margin: 5px;border: 2px solid #eee;flex: 1;}.myClass {display: flex;padding: 5px;margin: 4px;border: 1px solid green;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container" id="square-wrapper"><div class="col-md-3 square">A</div><div class="col-md-3 square">B</div><div class="col-md-3 square">C</div><div class="col-md-3 square">D</div><div class="col-md-3 square">E</div><div class="col-md-3 square">F</div><div class="col-md-3 square">G</div><div class="col-md-3 square">H</div><div class="col-md-3 square">I</div><div class="col-md-3 square">J</div><div class="col-md-3 square">K</div><div class="col-md-3 square">L</div></div>Best Answer
If you're familiar w media queries, then you should be able to adjust your grid, using - I imagine - grid-template-rows and grid-template-columns.
@media screen and (max-width:720px) {.grid-container {grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr 1fr;}}Let me know if it helps. Thank you and good luck.
Try to use other option why?
Because Bootstrap 3 use as first breakpoint the size of 768px
Extra small devices Phones (<768px)
But, if you are really want to use bootstrap, this is your solution (I think...)
$(window).on("load, resize", function () {var viewportWidth = $(window).width();if (viewportWidth > 720) {$(".col-xs-3").removeClass("col-xs-3").addClass("col-xs-4");}else{$(".col-xs-4").removeClass("col-xs-4").addClass("col-xs-3");}});