How to change order of table column for mobile devices

Question

I am editing newsletter for client and I have been stuck on this...

Here is example of my table

and problem is in mobile device looks like this

|---------|
| [image] |
|  text   |
|---------|
|  text   |
| [image] |
|---------|

and I want it to look like this

|---------|
| [image] |
|  text   |
|---------|
| [image] |
|  text   |
|---------|

How can I change table column for mobile devices ?

Thank you!

How is this related to bootstrap? Where is your CSS code? Or do you have none? — Ahmed Aboumalek, Jun 03 '19 at 14:41

Shizon · Answer 1 · 2019-06-03T15:06:35.467

You can't change display order of two elements unless you are using flexbox (tables have display: table and not display: flex); moreover table behaviour is very strict and would not allow such flexibility anyway and email platform compatibility does not let you replace tables with flexbox without heavy compatibility issues.

What i would do in your place is add another td element with "lorem ipsum" after the one containing the image: then you can hide one or another with media querys.

score 0 · Answer 2 · answered Jun 03 '19 at 14:39

table.info tr {
  display: flex;
  flex-direction: column;
  width: 100%;
}

table.info tr td,
table.info,
table.info tbody {
  display: block;
  width: 100%;
}

<table class="info">
  <th>
    <tr>
      <td>
        <img src="https://via.placeholder.com/150/0000FF/FFFFFF/?text=Digital.com">
      </td>
      <td>
        Lorem Ipsum dolor
      </td>
    </tr>

    <tr>
      <td>
        <img src="https://via.placeholder.com/150/0000FF/FFFFFF/?text=Digital.com">
      </td>
      <td>
        Lorem Ipsum dolor
      </td>

    </tr>
  </th>
</table>

Please add an explanation to your answer. – d_kennetz Jun 03 '19 at 15:05 — d_kennetz, Jun 03 '19 at 15:05

score 0 · Answer 3 · answered Jun 03 '19 at 14:55

If you are using bootstrap, you can use the "hidden" and "visible" display properties.

For example:
- Create two versions of your table: one for bigger screens and one for mobile.
- When on big screens, use hidden to hide the small screen version and visible to make the big screen table visible.
- On mobile screens, use hidden to hide the big screen version and visible to make the mobile version of the table visible.

This question goes into how this works in detail for Bootstrap 3 and Bootstrap 4: Hiding elements in responsive layout?

More info on how it works in Bootstrap 4: Missing visible-** and hidden-** in Bootstrap v4

How to change order of table column for mobile devices

3 Answers3