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

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -