html - 在平板设备上查看时并排显示的两列 - bootstrap 3

Question

我有以下 HTML

<div class="row col-lg-12" id="productBrief">
    <div id="RaspberryAndChocolate" style="display:none; height:200px;">

        <div class="col-lg-6"> @*-- Floats Left*@
            <img src="~/Content/Images/YogurtImages_404x290/image1.png" class="img-responsive" style="margin: 0 auto; padding-top: 5%" alt="Image alt" />
        </div>

        <div class="col-lg-6" id="productDesc"> @*-- Floats Right*@
            <h2 class="raspberryRed productLineHeight">FLAVOUR #3</h2>
            <h1 class="raspberryRed">
                RASPBERRY &<br /> WHITE CHOCOLATE
            </h1>
            <p class="productPara">
                A decadent combination of whole raspberries and smooth white chocolate that you will want to make last as long as possible. Teaspoon recommended.
            </p>
            <p>
                <span class="label label-as-badge" style="font-size: 0.9em; padding:3%"><a href='@Url.Action("Products", "Products")' class="colourWhite">VIEW ALL FLAVOURS</a></span>
            </p>
        </div>
    </div>
</div>

当在桌面上查看时，它们并排对齐，看起来很棒，当在 Ipad 上查看时，productDesc 出现在 productBrief 下，看起来像两行，我如何更改它，以便它们在 ipad 上查看时并排显示？我是 bootstrap 的新手，所以我正在努力了解 cols 等

Answer 1

类 col-xs col-sm 将进行调整，以便在移动设备上查看页面时将列堆叠起来。与 col-md 和 col-lg 不同，列将保持并排，直到窗口达到手机宽度，我认为手机宽度约为 360px。

编辑

在 Bootstrap 文档中，它指出断点在 768px。因此，使用 col-xs 时，当窗口宽度小于 768px 时，列将被堆叠。

I created a demo that shows when the columns stack