html - HTML 中的部分对齐问题

Question

我在 HTML 中遇到了节/列对齐的问题（我不确定这样称呼它们是否合适，但我的意思是屏幕的左/中/右 33%）。我看到的左栏/部分如下：

<div class="single-sidebar">
  <h2 class="sidebar-title">Products</h2>

  <div class="thubmnail-recent">
    <img src="img/Product-thumb-21.jpg" class="recent-thumb" alt="">
    <h2><a href="Product21.html">XXX</a></h2>
    <div class="product-sidebar-price">
      <ins>$29.99</ins>
    </div>
  </div>

  <div class="single-sidebar">
    <div class="thubmnail-recent">
      <img src="img/Product-thumb-22.jpg" class="recent-thumb" alt="">
      <h2><a href="Product22.html">YYY</a></h2>
      <div class="product-sidebar-price">
        <ins>$29.99</ins>
      </div>
    </div>
  </div>

</div>

当显示缩小时，像在手机上一样，中列和右列在左列之后依次显示。供参考，中间一栏如下：

<div class="row">
  <div class="col-sm-6">
    <div class="product-images">
    
      <div class="product-main-img">
        <img id="primary-img" src="img/Product-thumb-30.jpg" alt="" onclick="window.open(this.src)">
      </div>

      <div class="product-gallery">
        <img id="secondary-img" src="img/Product-thumb-109.jpg" alt="" onclick="window.onclick(this.src)">
        <img id="secondary-img" src="img/Product-thumb-110.jpg" alt="" onclick="window.onclick(this.src)">
      </div>


    </div>
  </div>
</div>

我的问题是我希望左栏显示在最右边：即出现的顺序应该是从 1)、2)、3) 到 2)、3)、1)。作为一个实验，我试图删除左列/部分，我注意到页面的中间部分和右侧部分实际上并没有向左滑动，而是停留在它们的位置，在左边留下一个空白区域。作为参考，我还包括相关部分的相关 CSS 代码：

.sidebar-title {
  color: #fead53;
  font-size: 25px;
  margin-bottom: 30px;
  text-transform: uppercase;
}

.single-sidebar {
  margin-bottom: 50px;
}

.product-main-img {
  margin-bottom: 20px;
}

.product-gallery {
  margin-bottom: 25px;
  margin-left: -15px;
  overflow: hidden;
}

你们中的任何人都可以帮助我理解如何修复代码，以使屏幕的中间和右侧 33% 部分向左滑动，并将左侧部分的内容显示在其他两个部分之后吗？非常感谢你的帮助！

标签： htmlcss