将标题和段落的图像左侧对齐，然后在小屏幕中将它们之间对齐

Question

我正在尝试创建一个标题和文本+图像的块，其中：-在大屏幕中，它们将交替左和右。-在较小的屏幕中，图像将位于标题下方和段落文本上方。

This is an example of how it should look like

我试着使用了flexbox，但是标题和文本不能很好地播放。我尝试了内联块，但图像不能在包装器中垂直对齐。

我将这个添加到一个squarespace网站，而模板没有使用bootstrap，所以我不能使用它。

<div class="alternating-content-block even">
  <div class="heading">
    <h2>Heading</h2>
  </div>
  <div class="image">
    <img src="https://images.squarespace-cdn.com/content/v1/56099b28e4b0e9a8dd53c467/1474681761217-VA1F29OQYAQX8IIW1018/ke17ZwdGBToddI8pDm48kFNHtaRIWeOk0XtEG2Iz2ptZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7Xj1nVWs2aaTtWBneO2WM-tqmpERyOMWWNh4XLI3lmIESCawszvU15S2rzqX3HdiIw/image-asset.jpeg?format=300w" />
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer venenatis posuere urna et sagittis. In elit elit, venenatis quis leo ut, accumsan lobortis arcu. Donec ut ultricies lorem. Donec id eleifend ipsum. In mi massa, lacinia non facilisis at, vehicula eget purus. Pellentesque dui dolor, scelerisque at ultrices at, fermentum sit amet dui. Mauris posuere gravida ornare. Sed id consectetur lorem. Integer pulvinar mi sed mi dignissim blandit. Vestibulum aliquet ex elit, vitae condimentum nibh faucibus id. Aliquam rhoncus risus non turpis pulvinar, vitae eleifend turpis eleifend. Etiam sed mi eget lorem pharetra imperdiet id ut est. Praesent mollis suscipit velit pharetra posuere. In in accumsan nisl.
  </div>
</div>
<div class="alternating-content-block odd">
  <div class="heading">
    <h2>Heading</h2>
  </div>
  <div class="image">
    <img src="https://images.squarespace-cdn.com/content/v1/56099b28e4b0e9a8dd53c467/1474681761217-VA1F29OQYAQX8IIW1018/ke17ZwdGBToddI8pDm48kFNHtaRIWeOk0XtEG2Iz2ptZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7Xj1nVWs2aaTtWBneO2WM-tqmpERyOMWWNh4XLI3lmIESCawszvU15S2rzqX3HdiIw/image-asset.jpeg?format=300w" />
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer venenatis posuere urna et sagittis. In elit elit, venenatis quis leo ut, accumsan lobortis arcu. Donec ut ultricies lorem. Donec id eleifend ipsum. In mi massa, lacinia non facilisis at, vehicula eget purus. Pellentesque dui dolor, scelerisque at ultrices at, fermentum sit amet dui. Mauris posuere gravida ornare. Sed id consectetur lorem. Integer pulvinar mi sed mi dignissim blandit. Vestibulum aliquet ex elit, vitae condimentum nibh faucibus id. Aliquam rhoncus risus non turpis pulvinar, vitae eleifend turpis eleifend. Etiam sed mi eget lorem pharetra imperdiet id ut est. Praesent mollis suscipit velit pharetra posuere. In in accumsan nisl.
  </div>
</div>

.alternating-content-block {
    position: relative;
  }
  .alternating-content-block .text {
    display: inline-block;
    vertical-align: middle;
    width: 66%;
  }
  .alternating-content-block .heading {
    display: inline-block;
    vertical-align: middle;
    width: 66%;
  }
  .alternating-content-block .image {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    width: 33%;
  }

  .alternating-content-block.even .text, 
  .alternating-content-block.even .heading  {
    float: left;

  }
  .alternating-content-block.even .image {
    float: right;
  }

  .alternating-content-block.odd .text, 
  .alternating-content-block.odd .heading  {
    float: right;
  }
  .alternating-content-block.odd .image {
    float: left;
  }

Answer 1

一种可能是在图像上使用float (根据需要，向左或向右)，将它们放在HTML代码中的文本之前，并对小屏幕进行媒体查询，将图像CSS更改为float: none; display: block;，以便在文本上方的自己块(默认情况下为100%宽)中显示它。