Reordering table columns for better mobile display

I've been working on editing a newsletter for my client and I seem to have hit a roadblock...

Here's an example of the table I'm working on

https://jsfiddle.net/xocrqwLs/

The issue arises when viewing it on a mobile device, as it appears like this:

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

But I want it to look like this instead:

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

Any suggestions on how I can adjust the table columns for better display on mobile devices?

Thank you!

htmlcssbootstrap-4responsive

Answer №1

To adjust the order of two elements in your layout, considering using flexbox as tables have strict behavior that limits flexibility; attempting to replace tables with flexbox may result in compatibility issues on email platforms.

In this scenario, you could try adding an additional td element after the image-containing one and utilize media queries to hide one or the other as needed.

Answer №2

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>

Answer №3

If you're utilizing bootstrap, there are options to make elements "hidden" or "visible" based on screen size.

For instance:
- Develop two versions of a table: one for larger screens and another for mobile devices.
- When viewed on larger screens, use the hidden property to conceal the mobile version and visible to display the large screen table.
- On mobile devices, utilize hidden to hide the desktop version and visible to reveal the mobile-friendly table.

This topic delves into the specifics of implementing this in Bootstrap 3 and Bootstrap 4: Hiding elements in responsive layout?

To learn more about how it's done in Bootstrap 4: Missing visible-** and hidden-** in Bootstrap v4

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure the left column extends all the way down

I've been struggling with this issue for almost three days now. After reading numerous articles on creating a three-column layout and experimenting with absolute and relative positioning, I'm still not able to achieve the desired result. What I& ...

css

css customized vertical scrollbar for a static division panel

I have the following HTML content and I need a fixed sidebar with 100% height. The vertical scrollbar should appear when content is added in mainContent or Content. <div class="mainContainer"> <h2>Title</h2> <div class="Content"&g ...

htmlcsstwitter-bootstrap

Bringing together the convenience of an auto slider with the precision of a

I am looking to create a slider that combines automatic sliding with the option for manual control. Ideally, the slider would change photos automatically but also allow users to manually switch using previous/next buttons or small dots. I have searched for ...

javascriptjqueryhtmlcssslider

eliminate whitespace characters within a string

Here is a question that suggests an easy way to remove space characters in a string using R. However, I encountered an issue when trying to remove a space between two numbers (e.g. 11 846.4) while working with the following table: require(XML) require(RCur ...

htmlrregexlinuxstring

Fetch the contents of a div from a PHP page on a different domain and display it on another webpage

Hey there, I hope you're having a great morning! I'm currently working on setting up an affiliate box for our affiliates within Wordpress. I've managed to create it dynamically and you can check out an example here The values needed to cre ...

phpjquerywordpresshtmlload

CSS fails to display image within PHP script

Having an issue with displaying CSS through a PHP file. Everything seems to be working fine until I try to display an image from the database. The source code does accept the value from the DB, but the image doesn't show up. Interestingly, the image d ...

phpcssimage

Progress Bar Has Wandered Off Track

Having trouble with two queries. Take a look at the live view here First Query: Struggling to position the progress bar below my image using CSS. Second Query: Want to make the images slide left instead of fading with the progress bar in my Javascript. ...

javascriptjquerycss

Rendering EJS templates and smoothly scrolling to a specific section on a webpage

I need to display my index page and automatically scroll down to the form section. One way I thought of doing this is by: app.post('/rsvp', (req, res) => { res.render('index/#rsvp', { errors: { email: 'Your email has already ...

htmlnode.jsexpressejs

Importing styles from an external URL using Angular-cli

How can I load CSS styles from an external URL? For instance, my domain is domain.eu but my site is located at sub.domain.eu. I want to use styles that are stored on the main domain (common for all sites). The example below does not work: "styles&qu ...

htmlcssangularangular-cli

Issue with background image not resizing or repeating correctly on mobile devices

My website header is not scaling properly on mobile devices, causing some issues. The background color with white text using Bootstrap and custom CSS is not extending across the screen on smartphones or when viewed in Chrome Dev Tools. As a result, two ma ...

htmlcsstwitter-bootstrap

Guide on eliminating flex in CSS

Having an issue with aligning two grids created in HTML using Bootstrap. Below is the code: <!DOCTYPE html> <html lang="en"> <head> <title>IRIS Flower Classification</title> <link rel="stylesheet" href="{{ url_for( ...

htmlcssbootstrap-4

"Creating the Perfect Parallax Effect: A Step-by-Step

Seeking to implement a responsive parallax effect on my website, I have the following structure: <section id="first"> <div class="text fixed" > <h1><b>aSs</b> lorem ipsum dolor sit amet</h1> <p> ...

javascriptjquerycsshtmlparallax

What is the best way to superimpose text on a variety of images with varying sizes using CSS

I have a client who is requesting a sold text to be displayed on top of all images that have been sold, positioned in the bottom left corner of each image. While I have successfully implemented this feature, the issue arises when dealing with images of var ...

htmlcssoverlayimage-size

I'm having trouble getting the width set to 100% to work on my website. Can you assist me in making my website

I'm in the process of creating my first portfolio website for myself. It looks fantastic when viewed on a desktop computer, but once I try to open it on a mobile device, it's not responsive at all. I have experimented with setting the width to 10 ...

htmlcssresponsive-designmobile-websiteresponsiveness

What is the reason behind external and internal CSS not functioning properly within my HTML code?

I have implemented the following HTML/CSS code on our organization's Intranet webpage <div class="hello">hello</div> <style> .hello { color: blue } </style> Upon loading the HTML, I observed the following outcome ...

htmlcss

`JQuery fadeOut seems to have a limitation where it only applies to the

I have a group of divs, each containing an anchor tag that triggers a JavaScript function (which uses AJAX to delete a row from a table). Here's an example setup: <div id="container"> <div><a id="btn" onclick="deleteRow()">Delet ...

javascriptjqueryhtmlcssajax

ensure protection against unauthorized class modification via browser console (security vulnerability)

Currently interning as a second-year student in development, I have been tasked with adding an authentication system to a website. Although it "works," I believe the code is subpar and am seeking advice on best practices for improving this solution. The p ...

phphtmlcsssecurity

Issues with CSS not properly clearing div elements on mobile or responsive designs

We are currently facing an issue with the responsive divs in our project. Instead of clearing other div elements on the page, they are overlapping. Our project is built using bootstrap 4.3.1 and we would appreciate any assistance. Feel free to visit this ...

htmlcssbootstrap-4responsive-design

How to vertically align text in a column with a background color using Bootstrap 4.1

Here is the code that effectively aligns the text in the middle: <div class="container section-content"> <div class="row" style="border-radius: 4px; border: solid 1px #979797;"> <div class="col-md-3 align-self-center" style="bac ...

htmlcsstwitter-bootstrapbootstrap-4

What could be causing my div elements to not appear on the page?

Hey there, this is my debut post here so bear with me on the formatting. I'm currently working on a project and encountering some hurdles with my divs. Even though I've left space for them, I just can't seem to get my divs (or cards) to disp ...

htmlcss