HTML CSS
(a quick guide)
<div class="demo"> <!-- FIRST ROW --> <div class="colA">1</div> <div class="colB">2</div> <!-- SECOND ROW --> <div class="colA">1</div> <div class="colB">2</div> </div>
FLEX CONTAINER .demo { display: flex; flex-wrap: wrap; }
ON BIG SCREENS - 2 COLS .colA { width: 30%; } .colB { width: 70%; }
ON SMALL SCREENS - 1 COL + HIDE @media screen and (max-width: 600px) { .colA { width: 100%; } .colB { display: none; } }
GRID CONTAINER - 2 COLS .demo { display: grid; grid-template-columns: 30% 70%; }
ON SMALL SCREENS - 1 COL + HIDE @media screen and (max-width: 600px) { .demo { grid-template-columns: 100%; } .colB { display: none; } }
CLEARFIX CONTAINER .demo { overflow: auto; } .demo::after { content: ""; clear: both; display: table; }
ON SMALL SCREENS - 1 COL + HIDE @media screen and (max-width: 600px) { .colA { width: 100%; } .colB { display: none; } }
ON BIG SCREENS - 2 COLS .colA, .colB { float: left; width: 50%; }