0

I have a desktop design with a 7 column table-like grid (using Bootstrap) with column names at the top.

On small screens the grid should become 3 columns. The 7 column names get split into 2 separate rows and are interleaved with the other rows. Basically the order of the markup changes completely based on screen size.

What's the best way to approach this?

I originally thought I'd use jQuery to cut-and-paste the content, but now I'm second-guessing that

I also saw this comment on responsejs : Replace HTML depending on screen size Which gives you a user-friendly way to swap content depending on screen size, seems almost like having a separate page for mobile though...

Community
  • 1
  • 1
mustacheMcGee
  • 481
  • 6
  • 19
  • Well, I misread your question and came up with something that isn't the answer, but I don't want the work to go to waste, so here is something to consider via Bootstrap 3: http://bootply.com/82732 – Sean Ryan Sep 24 '13 at 01:07
  • Thanks for the atttempt though :) Yeah, that's basically what I have now. I think maybe something like this will do it: http://stackoverflow.com/questions/9886676/jquery-add-closing-tag-and-then-reopen-when-using-before – mustacheMcGee Sep 24 '13 at 11:56

1 Answers1

0

Earlier Solution:

<table>
    <tr>
        <th>Header1</th>
        <th>Header2</th>
        <th>Header3</th>
        <th class="visible-desktop">Header4</th>
        <th class="visible-desktop">Header5</th>
        <th class="visible-desktop">Header6</th>
        <th class="visible-desktop">Header7</th>
    </tr>
    <tr>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
        <td class="visible-desktop">Data4</td>
        <td class="visible-desktop">Data5</td>
        <td class="visible-desktop">Data6</td>
        <td class="visible-desktop">Data7</td>
    </tr>
</table>

Edit: So you mean you want this for small screens:

H1 H2 H3
D1 D2 D3
H4 H5 H6 H7
D4 D5 D6 D7

And then how do you plan to have the next row of data? like this? :

H1 H2 H3
D1 D2 D3
H4 H5 H6 H7
D4 D5 D6 D7
H1 H2 H3
D8 D9 D10
H4  H5  H6  H7
D11 D12 D13 D14

Well this doesn't make a very good UI in a small screen!

However if you still want to do it then I would recommend you use span divs instead of tables.

In That Case something like this:

<div class='span12'> //Entire row1 which will be split into 2 for smaller screens 
    <div class='span6'>
         <div class='span2'>
             <table>
                 <tr>
                 <td>H1</td>
                 </tr>
                  <tr>
                 <td>D1</td>
                 </tr>
             </table>
         </div>
         <div class='span2'>
              <table>
                     <tr>
                     <td>H2</td>
                     </tr>
                      <tr>
                     <td>D2</td>
                     </tr>
                 </table>
         </div>
         <div class='span2'>
          <table>
                 <tr>
                 <td>H3</td>
                 </tr>
                  <tr>
                 <td>D3</td>
                 </tr>
             </table>
         </div>
    </div>
    <div class='span6'>
        /*And so on*/
    </div>
</div>
<div class='span12'> //Entire row1 which will be split into 2 for smaller screens 
...
</div>
user1071979
  • 1,701
  • 2
  • 12
  • 25