带有文本和图像的 Bootstrap 3 面板（图像具有不同的背景）

Question

I am trying to implement 3 panels with text and images with a different background color for the images (darker) and another color for the text.

this is my current code which works for the desktop version of the website but breaks on mobile. At the moment the layout is IMAGE->IMAGE->IMAGE. Text->Text->Text and it should be IMAGE -> Text. Image -> Text. Image -> Text:

current code

Answer 1

So as per my comment, you need to include both your image and text into a column, then all three columns into a row. Something like this:

<div class="row">
  <div class="col-md-4">
    <div><img src="#"></div>
    <div>Some text</div>
  </div>
  <div class="col-md-4">
    <div><img src="#"></div>
    <div>Some text</div>
  </div>
  <div class="col-md-4">
    <div><img src="#"></div>
    <div>Some text</div>
  </div>
</div>

You should check out the bootstrap site for guidance on using their grid layout :)

Answer 2

In bootstarp to using panels you must use panel codes you can see the bootstrap panels here Bootstrap Panels

<div class="row">
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">Panel heading without title</div>
            <div class="panel-body">
                <img src="#">
                <p>text Here</p>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">Panel heading without title</div>
            <div class="panel-body">
                <img src="#">
                <p>text Here</p>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">Panel heading without title</div>
            <div class="panel-body">
                <img src="#">
                <p>text Here</p>
            </div>
        </div>
    </div>
</div>

Automatically all three columns put in the one row if you want use different column grid you must the another div tag to specify the grids

also panels have the panel title class but I used panel heading class you can use panel title if you want