CSS Table 不同屏幕尺寸下的不同单元格顺序

Question

我正在尝试创建一个 table 两列，文本和图片交替显示。每行的文字和图片相互关联。我已经让那部分工作了。

问题是当它在 phone 上时，顺序变成 text1-picture1-picture2-text2-text3-picture3-picture4 -...

有没有办法让事物的顺序不同（意思是text1-picture1-text2-picture2-text3 ...) 在一定的屏幕尺寸下?

.squish {
  padding-left: 10%;
  padding-right: 10%;
}

@media only screen and (max-width: 1000px) {
  .squish {
    padding-left: 5%;
    padding-right: 5%;
  }
}

.squishTable {
  padding-left: 10%;
  padding-right: 10%;
}

table,
td {
  border: 0px solid #000;
}

table {
  width: 100%;
}

td {
  width: 33.33%;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px;
  display: table-cell;
}

@media screen and (max-width:1000px) {
  table tr>* {
    display: block;
  }
  table tr {
    display: table-cell;
  }
}

@media only screen and (max-width: 1000px) {
  .squishTable {
    padding-left: 5%;
    padding-right: 5%;
  }
  td {
    width: 100%;
  }
}

<div class="squishTable">
  <table>
    <tbody>
      <tr>
        <td>
          Text1
        </td>
        <td>
          Image1
        </td>
      </tr>
    </tbody>
  </table>

  <table>
    <tbody>
      <tr>
        <td>
          Image2
        </td>
        <td>
          Text2
        </td>
      </tr>
    </tbody>
  </table>

  <table>
    <tbody>
      <tr>
        <td>
          Text3
        </td>
        <td>
          Image3
        </td>
      </tr>
    </tbody>
  </table>

Answer 1

你可以改用 flex 和 figure html table

可能的例子：

figure {
  display: flex;
  margin: 0;
  align-items: center;
}

figure:nth-child(even) {
  flex-direction: row-reverse
}

img,
figcaption {
  flex: 1 0 auto;
  margin: 2px;
}

body {
  margin: 0;
}

<div class="squeed">
  <figure>
    <img src="http://dummyimage.com/200x100/09f">
    <figcaption>
      <h1>HTML Ipsum Presents</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </figcaption>
  </figure>

  <figure>
    <img src="http://dummyimage.com/200x100/09f">
    <figcaption>
      <h1>HTML Ipsum Presents</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </figcaption>
  </figure>

  <figure>
    <img src="http://dummyimage.com/200x100/09f">
    <figcaption>
      <h1>HTML Ipsum Presents</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </figcaption>
  </figure>

或

figure {
  display: flex;
  margin: 0;
  align-items: center;
}

figure:nth-child(even) {
  flex-direction: row-reverse
}

img,
figcaption {
  flex: 1;
  margin: 2px;
}

body {
  margin: 0;
}

<div class="squeed">
  <figure>
    <img src="http://dummyimage.com/200x100/09f">
    <figcaption>
      <h1>HTML Ipsum Presents</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </figcaption>
  </figure>

  <figure>
    <img src="http://dummyimage.com/200x100/09f">
    <figcaption>
      <h1>HTML Ipsum Presents</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </figcaption>
  </figure>

  <figure>
    <img src="http://dummyimage.com/200x100/09f">
    <figcaption>
      <h1>HTML Ipsum Presents</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </figcaption>
  </figure>

除了答案之外还有一些读物：

CSS Table 不同屏幕尺寸下的不同单元格顺序

CSS Table different cell order in different screen sizes

html

css

html-table

responsive-design