javascript - How to create collapsable grid, table, or columns -
i want display data in 2 columns. when there enough room, data should this:
| data | data2 | | data3 | data4 | | data5 | data6 |
if user resizes there window there not enough room display 2 columns, want data this:
| data | | data2 | | data3 | | data4 | | data5 | | data6 |
if guess there questions , posts online this, don't know search. links, tips, example code, , guide appreciated!
if don't need support ie9 , below can use display: flex
.items { display: flex; flex-flow: row wrap; width: 100%; } .item { flex-basis: 50%; } @media screen , (max-width: 767px) { .item { flex-basis: 100%; } }
<div class="items"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> </div>
Comments
Post a Comment