How to center and reorder images with captions in the table depending on the width of the browser wi-CodePudding

I have a 2 column table with images and captions on my website. I centered all the elements in the cells. I want to change the order of the text and the image in rows in the table so that the text is on the left first and the image on the right, then in reverse order on the next line. For now, I just swapped the items manually.

Everything works fine when you are looking from the large screen. But if you are using a small screen there are two main problems:

I noticed that at some screen width some images collapse into one column, while others don't. Here is a screenshot of what I mean.
And the major problem is that some titles are above images at small screen width. It's because of the swapped order of image and text in a row. But I want to keep it like that on big screens. Screenshot.

I think I'm missing something in the CSS.

What I expect from the table: Screenshot.

So, how to collapse all rows in the table if any of them collapse? Is there a good way ordering the items in a row?

I've tried the following code:

:root {
    --text-white: #fff;
    --table-image-width: 500px;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px;
    line-height: 26px;
    font-family: "Times New Roman", serif;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    text-align: center;
    background-color: black;
    color: white;
    text-indent: 0;
    white-space: normal;
}

.section__article_center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.section-article__table {
    text-align: center;
    min-width: var(--table-image-width);
    width: 80%;
    border: 1px solid white;
    table-layout: auto;
}

.section-article__table img {
    width: var(--table-image-width);
}

.section-article__table tr {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.section-article__table td {
    border: 1px solid white;
    padding: 10px 40px;
    overflow: hidden;
    flex-grow: 1;
    flex-basis: auto;
    display: flex;
    align-self: stretch;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

<div class="section__article_center">
    <table class="section-article__table">
        <thead>Some photos</thead>
        <tbody>
            <tr>
                <td><img src="https://dudkomatt.github.io/Images/Random/1.jpg" alt="Some photo"></td>
                <td>Beautiful clouds</td>
            </tr>
            <tr>
                <td>Wet water</td>
                <td><img src="https://dudkomatt.github.io/Images/Random/2.jpg" alt="Some photo"></td>
            </tr>
        </tbody>
    </table>
</div>

The same code on JSFiddle: https://jsfiddle.net/indefinite_person/o1my5rfp/1/

CodePudding user response：

I'd recommend that you don't use tables for this. Tables are very good at displaying data in a fixed position, but are not very flexible and shouldn't be used as a styling tool.

A <figure> with an <img> and <figcaption> will be more semantic. Then you could style these <figure> elements with Flexbox and specifically the order property to position your images and text.

Place the image and caption in the order of your mobile design. That's the basis. Then with a media query, flex-direction, and the order property, change the layout and order of the images and captions.

In the snippet below I've made a demo of how this looks and works. Try it out.

:root {
    --text-white: #fff;
    --table-image-width: 200px;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
}

body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 26px;
    font-family: "Times New Roman", serif;
    background-color: black;
    color: white;
}

.section__article_center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.section__article_center figure {
  display: flex;
  flex-direction: column;
  border: 1px solid white;
  margin: 0;
}

.section__article_center figure :is(figcaption, img) {
  padding: 40px;
}

.section__article_center figure figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid white;
  width: 200px;
}

.section__article_center figure img {
  width: var(--table-image-width);
}

@media screen and (min-width: 32em) { /* 480px */
  .section__article_center figure {
    flex-direction: row;
    align-items: stretch;
  }
  
  .section__article_center figure:nth-child(odd) figcaption,
  .section__article_center figure:nth-child(even) img {
    order: 0;
  }

  .section__article_center figure:nth-child(even) figcaption,
  .section__article_center figure:nth-child(odd) img {
    order: 1;
  }
  
  .section__article_center figure figcaption {
    border-top: none;
  }
  
  .section__article_center figure:nth-child(even) figcaption {
    border-left: 1px solid #ffffff;
  }
  
  .section__article_center figure:nth-child(odd) figcaption {
    border-right: 1px solid #ffffff;
  }
}

<div class="section__article_center">
  <figure>
    <img src="https://dudkomatt.github.io/Images/Random/1.jpg" alt="Some photo">
    <figcaption>Beautiful clouds</figcaption>
  </figure>
  
  <figure>
    <img src="https://dudkomatt.github.io/Images/Random/2.jpg" alt="Some photo">
    <figcaption>Wet water</figcaption>
  </figure>
  
  <figure>
    <img src="https://dudkomatt.github.io/Images/Random/1.jpg" alt="Some photo">
    <figcaption>Beautiful clouds</figcaption>
  </figure>
  
  <figure>
    <img src="https://dudkomatt.github.io/Images/Random/2.jpg" alt="Some photo">
    <figcaption>Wet water</figcaption>
  </figure>
</div>

CodePudding user response：

If you want to change the order of elements that are in a flexbox you can use the order property. More info can be found here. Essentially how it works is use this property on the element you want to put in a different position.

In your case you only want to change the order of the elements when the screen becomes too small. You will need to use a media query. Inside the media query you can then set the order of one of the pictures.