如何更改移动设计（引导程序）

Question

我目前正在建立一个网站。我已经为网站设计了一个基本的定价图表（使用引导程序） 我遇到的问题是，当我调整窗口大小时，设计会错位。

这是目前设计的代码

<div class="background-pricing container-fluid">
    <div class="container">
        <div class="row">
            <div class="payment-method">We accept:  Cash and Checks with payment due on Fridays of each week.</div>
        </div>
<!--infants and children -->
        <div class="row">
            <div class="infants-box col-sm-6 col-md-6 col-lg-6">
                <div class="infants">Infants</div>
            </div>
            <div class="col-sm-6 col-md-6 col-lg-6">
                <div class="children">Children 2+</div>
            </div>
        </div>

        <div class="row">
            <div class="full-time col-sm-6 col-md-6 col-lg-2">Full Time</div>
            <div class="prices-left-box col-sm-5 col-md-3 col-lg-5">
                <div class="prices-left">$200 Per Week</div>
            </div>
            <div class="prices-right-box col-sm-5 col-md-3 col-lg-5">
                <div class="prices-right">$150 Per Week</div>
            </div>
        </div>
        <div class="row">
            <div class="full-time col-sm-2 col-md-2 col-lg-2">Up to 4 Hours</div>
            <div class="prices-left-box col-sm-5 col-md-5 col-lg-5">
                <div class="prices-left">$125 Per Week</div>
            </div>
            <div class="prices-right-box col-sm-5 col-md-5 col-lg-5">
                <div class="prices-right">$100 Per Week</div>
            </div>
        </div>
    </div>
</div>

如您所见，在全屏模式下，图表清晰易读，但在调整大小时，图表不可读，“婴儿”和“2 岁以上儿童”并排显示。

如何让它更容易阅读？

Answer 1

您无法在小屏幕中更改列的顺序，但您可以在大屏幕中更改。

所以改变你的列的顺序。

<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>

<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>

默认情况下首先显示主要内容。

所以在移动端首先显示主要内容。

通过使用 col-lg-push 和 col-lg-pull，我们可以重新排列大屏幕中的列，并在左侧显示侧边栏，在右侧显示主要内容。

工作fiddle here.