WordPress - ShortCode列的移动堆叠顺序

Question

这非常简单，但却让我抓狂！

我正在写一个Wordpress主题，并使用插件短码Ultimate，它的样式基于Bootstrap库。我是Bootstrap的初学者，需要一些帮助来重新排列移动/平板设备上的元素(<770px)。

基本上，我要做的是让桌面版本的<h2>和<p>显示在屏幕的左侧，让<img>显示在右侧(它们已经这样做了)。

当视口宽度<770px时，我希望在<h2>和<p>上有<img>。但是现在发生的事情却恰恰相反:(

[div]
    [div]
      <h2>Our Roots</h2>
      <p>Some text</p>
    [/div]
    [div]
      <img src="some-image.png">
    [/div]
[/div]

Answer 1

将img div向上移动，并使用向右拉将其浮动到桌面视图的右侧。

Answer 2

您可以使用@Media调用并为您的每种情况创建自定义CSS，并为您的第一种情况使用pull-left和pull-right类。

Answer 3

感谢大家的回复，我还在学习引导。我所做的是这样的，它完美地工作了：

[div]
    [div]
      <img src="some-image.png" class="mobile">
      <h2>Our Roots</h2>
      <p>Some text</p>
    [/div]
    [div]
      <img src="some-image.png" class="desktop">
    [/div]
[/div]

我基本上只是放置了两次图片，并应用了这个CSS：

.mobile {
  display: none;
}

@media screen and (max-width 770px) {
  .mobile {
    display: block;
   }
  .desktop {
    display: none;
   }
}

仍在学习:)