Html 在这个特定的设计中定位这些元素的最佳方式是什么？

下面是我的代码：

以下是我试图实现的设计：

---

我尝试过相对位置和页边距，但是我使用的方法最终影响了我页面的响应能力。在保持网页能够适应屏幕大小变化的同时，在上述设计中定位这些元素的最佳方法是什么？

您可以使用引导获得响应性设计。使用引导时，可以使用网格系统来管理元素。类“row”将得到一个划分为12个相等列的网格。然后，根据您的设计，您可以使用col-md-x/col-sm-x来定位元素。您可以参考以进一步了解。换句话说，使用col-md-3显示图像，使用col-md-9显示信息。它会起作用的

示例仅供参考：

 <div class="row">
     <div class="col-md-3">
       <img /> <-- put your image here -->
     </div>
     <div class="col-md-9">
       <-- put your texthere -->
     </div>
 </div>
 <div class="row">
     <div class="col-md-9">
       <-- put your texthere -->
     </div>
     <div class="col-md-3">
       <img /> <-- put your image here -->           
     </div>
 </div>

随机插入引导程序并不能回答他们的问题。来吧。@JBartus：我不同意。当您使用这种预定义的CSS时，实现RWD比自己编写任何东西都要容易。更干净的视图，省力！！不管你怎么说，说“只需使用引导”都是一种巨大的逃避。如果你编写了一个他们试图在Bootstrap中做什么的示例来向他们演示，我不会这么说，但你所做的只是把他们指向Bootstrap，然后走开。@JBartus：谢谢你的建议。我添加了一个示例供参考。您最好以相同的方式订购带有图像的div，并使用列偏移量，以便在移动和屏幕阅读器上具有一致的显示。欢迎使用Stack Overflow！这个问题要么过于宽泛，基于观点，要么需要讨论，因此对于堆栈溢出来说是离题的。如果您有一个具体的、可回答的编程问题，请提供完整的详细信息。