html - 如何更改或切换移动版本的结构？

Question

目前，这是我的桌面版本。我的桌面看起来像那样。先是图像，然后是 content(h1 , p, button) ，先是 content(h1 , p, button) ，然后是图像，等等……但我想为移动版本稍微切换一下 html 结构。移动版看起来很困惑。我希望首先显示图像，然后显示移动设备中所有行换行的内容(h1、p、按钮)。我怎么做？我可以使用媒体查询或 jquery 来做到这一点吗？我不想在桌面和移动设备上使用重复的代码。

我的代码 http://jsfiddle.net/0ucLzbkq/2/

    <section class="row-wrap">
        <div class="row-inner">
            <img class="poster" src="http://dummyimage.com/370x370/000/fff"> 

            <div class="poster-content">
                <h1>Heading</h1>
                <p>this is a paragraph</p>
                <a class="btn-wrap" target="_blank" href="#">
                    <div class="btn">button</div>
                </a>
            </div>
        </div>
    </section>



    <section class="row-wrap">
        <div class="row-inner">
             <div class="poster-content">
                <h1>Heading</h1>
                <p>this is a paragraph</p>
                <a class="btn-wrap" target="_blank" href="#">
                    <div class="btn">button</div>
                </a>
            </div>
            <img class="poster" src="http://dummyimage.com/370x370/000/fff"> 


        </div>
    </section>

Answer 1

在我看来，媒体查询是最好的方式。您将必须设置结构中多个元素的属性，以便它们按您想要的方式排列。

媒体查询非常适合这种事情。除此之外，您可以尝试使用 Bootstrap，也许使用 col--md-1 ... 12 类。它们会根据设备的宽度和高度自动排列。