如何在现代HTML中创建流畅的布局

Question

对于现代HTML来说，我是个新手（或者太老了），我不得不开发简单的UI。我需要在其中支持2种类型的屏幕：

从上面可以看到，我的UI应该包含一个菜单和内容（例如，旁边有图片的文本）。如果用简单的文字在手机上显示，则应逆时针旋转90度。

在我的时代，布局是通过<table><tr><td>..或类似<frameset>..的东西来完成的。但是一种方案是<td>item1</td><td>item2</td>，另一种方案是<tr>item1</tr><tr>item2</tr>。在静态.htm文本文件中，我只能编写一个变体。我知道的一种方法是大量使用javascript并通过document.write()生成文档，但是我不太喜欢这个主意，我认为应该有一些简单的方法。

在不使用繁重且难以学习的框架的情况下，手动在HTML中执行此操作的最简单的变体是什么？

Answer 1

具有 flexbox 的基本结构可能是

（没有任何样式和尺寸）

figure {
  margin: 0;
}

.list-unstyled {
  list-style: none;
  padding: 0;
  margin: 0;
}

.d-flex {
  display: flex;
}

@media screen and (max-width: 767.99px) {
  .sm-fd-column {
    flex-direction: column;
  }
}

@media screen and (min-width: 768px) {
  .lg-fd-column {
    flex-direction: column;
  }
  /* ... */
  .lg-order-2 {
    order: 2;
  }
  /* ... */
}

<div class="d-flex lg-fd-column">
  <div>
    <ul class="list-unstyled d-flex sm-fd-column">
      <li><input type="checkbox"></li>
      <li><input type="checkbox"></li>
      <li><input type="checkbox"></li>
      <li><input type="checkbox"></li>
      <li><input type="checkbox"></li>
    </ul>
  </div>
  <div class="d-flex sm-fd-column">
    <figure class="lg-order-2"><img src="http://via.placeholder.com/200x150" alt=""></figure>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus saepe nobis impedit excepturi, perspiciatis! Eaque in quam corporis, modi, eos assumenda error totam autem cumque dolores magni deleniti! Doloribus, unde.
    </p>
  </div>
</div>

它提供两种不同的大小：小（sm）和大（lg）。

有关flexbox的更多信息： https://css-tricks.com/snippets/css/a-guide-to-flexbox/