html - 在 html 中排序部分/容器类

Question

我有以下 HTML 代码代表电子商务网站中的产品页面。我删除了一些产品以简化。重点是：以全屏显示页面我基本上看到产品类别页面标题下方的 3 列/部分。左侧部分（屏幕的 33%）是“产品”和“最近的帖子”部分，中间部分（屏幕的 33%）包含“产品-breadcroumb”和相关图像部分，右侧部分包含“产品内部”部分。接下来，位于中间和右侧部分的下方，我看到了“相关产品包装器”部分。

    <div class="product-big-title-area">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="product-bit-title text-center">
                        <h2><b>PRODUCT CATEGORY A</b></h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
    <div class="single-product-area">
        <div class="zigzag-bottom"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-4">


                    <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 class="single-sidebar">
                        <h2 class="sidebar-title">Recent Posts</h2>
                        <ul>
                            <li><a href="product22.html">XXX</a></li>
                            <li><a href="product23.html">YYY</a></li>
                        </ul>
                    </div>
                </div>
                
                <div class="col-md-8">
                    <div class="product-content-right">
                        <div class="product-breadcroumb">
                            <a href="">Home</a>
                            <a href="">PRODUCT CATEGORY A</a>
                            <a href="">XXX</a>
                        </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)">
                                    <script>
                                    window.onload = function(e){ 
    const secondaryImages = document.querySelectorAll("#secondary-img")
    const primaryImage = document.getElementById("primary-img")

    secondaryImages.forEach((image) => {
        image.addEventListener("click", function() {
            const backupSrc = primaryImage.src
            primaryImage.src = image.src
            image.src = backupSrc
        })
    })
}
                                    </script>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-sm-6">
                                <div class="product-inner">
                                    <h2 class="product-name">XXX</h2>
                                    <div class="product-inner-price">
                                        <ins>$14.99</ins>
                                    </div>    
                                       

                                    
                                    <div class="product-inner-category">
                                        <p>Category: <a href="">PRODUCT CATEGORY A</a>. Tags: <a href="">awesome</a>, <a href="">best</a>, <a href="">sale</a>
                                    </div> 
                                    
                                    <div role="tabpanel">
                                        <ul class="product-tab" role="tablist">
                                            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Description</a></li>
                                            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Reviews</a></li>
                                        </ul>
                                        <div class="tab-content">
                                            <div role="tabpanel" class="tab-pane fade in active" id="home">
                                                <h2>Product Description</h2>  
                                                <p>XXX description </p>

                                                </div>
                                            <div role="tabpanel" class="tab-pane fade" id="profile">

                                                    
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                        
                        
                        <div class="related-products-wrapper">
                            <h2 class="related-products-title">Related Products</h2>
                            <div class="related-products-carousel">
                            
                            
                                <div class="single-product">
                                    <div class="product-f-image">
                                        <img src="img/Product-thumb-21.jpg" alt="">
                                        <div class="product-hover">                                          
                                            <a href="Product21.html" class="view-details-link"><i class="fa fa-link"></i> See details</a>
                                        </div>
                                    </div>
                                    <h2><a href="Product21.html">XXX</a></h2>
                                    <div class="product-carousel-price">
                                        <ins>$29.99</ins> 
                                    </div> 
                                </div>
                                
                                <div class="single-product">
                                    <div class="product-f-image">
                                        <img src="img/Product-thumb-22.jpg" alt="">
                                        <div class="product-hover">                
                                            <a href="Product22.html" class="view-details-link"><i class="fa fa-link"></i> See details</a>
                                        </div>
                                    </div>
                                    <h2><a href="Product22.html">YYY</a></h2>
                                    <div class="product-carousel-price">
                                        <ins>$29.99</ins>
                                    </div> 
                                </div>
                            </div>
                        </div>
                    </div>                    
                </div>
            </div>
        </div>
    </div>

相反，我想将左侧部分“产品”+“最近的帖子”移动到最右边，并将其他两个部分移动到左边。也就是说，我不想让（1-left）“Products”+“Recent Posts”，（2-center）“Product-images”和（3-right）“product-inner”，而是将它们订购为（2 )、(3) 和 (1)。我已经尝试了很多次，包括设置 col 类排序但失败了。你们中的任何人都可以帮助我了解如何解决它吗？非常感谢你的帮助！祝你有美好的一天

标签： htmlcss