使用Bootstrap重新排序CSS列

Bootstrap has a great many features. One of the main features that is used in pretty much every Bootstrap project I've ever seen is the grid system. The grid system provides a great tool to scaffold and build out any number of projects.

Bootstrap具有很多功能。 我见过的每个Bootstrap项目都使用的主要功能之一是网格系统 。 网格系统提供了一个很好的工具来搭建和扩展任何数量的项目。

Today, we'll be looking at a lesser known grid feature, the grid column ordering classes. It is a simple feature, understated on their docs, but very powerful in the right scenarios.

今天，我们将研究一个鲜为人知的网格功能，即网格列排序类。 这是一个简单的功能，在他们的文档中低估了它，但是在正确的情况下却非常强大。

什么是列顺序？ (What Is Column Ordering?)

Column ordering classes allow us to change the order of our grid system based on different browser sizes. This means that on a large screen, you can have a different grid than on a mobile screen.

列排序类使我们可以根据不同的浏览器大小来更改网格系统的顺序。 这意味着在大屏幕上，您可以拥有与移动屏幕不同的网格。

For example, let's say we have 3 columns (A, B, and C) on large screens. B will be the most prominent item we have. Right in the middle, front and center.

例如，假设在大屏幕上有3列（A，B和C）。 B将是我们拥有的最突出的项目。 就在中间，前面和中间。

A

一个

B

乙

C

C

On mobile devices, this grid will collapse to be A on top of B on top of C. We want B to take higher precedence, though, since it's our most important element. We want it to be placed on the very top.

在移动设备上，此网格将折叠为A，位于B的顶部，位于C的顶部。但是，我们希望B具有更高的优先级，因为它是我们最重要的元素。 我们希望将其放在最上面。

This is what we want for mobile devices:

这是我们想要的移动设备：

B

乙

A

一个

C

C

How can we achieve this? Bootstrap provides a great way to handle this scenario, the push and pull column classes.

我们怎样才能做到这一点？ Bootstrap提供了一种很好的方式来处理这种情况，即push和pull列类。

推拉类 (The Push and Pull Classes)

The classes are used along with the Bootstrap grid classes of .col-xs-#, .col-sm-#, .col-md-#, and .col-lg-#.

这些类与.col-xs-# .col-sm-# .col-md-#和.col-lg-#的Bootstrap网格类一起使用。

The push and pull classes applied to the Bootstrap grid are .col-xs-push-# or .col-xs-pull-#. That also works with sm, md, and lg.

应用于Bootstrap网格的push和pull类是.col-xs-push-#或.col-xs-pull-# 。 这也适用于sm ， md和lg 。

The push class will move columns to the right while the pull class will move columns to the left.

push类将向右移动列，而pull类将向左移动列 。

重新排序列 (Reordering Columns)

Now that we know what the classes are, let's take our above example and turn that into working HTML and CSS. We will need to create the 3 different sections for large screens. This is easy enough. The code will look like:

现在我们知道了类是什么，让我们以上面的示例为例，将其转换为可工作HTML和CSS。 我们将需要为大屏幕创建3个不同的部分。 这很容易。 代码如下所示：

<div class="row">
    <div class="col-md-4">
        <div class="alert alert-info">A</div>
    </div>
    <div class="col-md-4">
        <div class="alert alert-danger">B</div>
    </div>
    <div class="col-md-4">
        <div class="alert alert-info">C</div>
    </div>
</div>

This gives us:

这给我们：

A

一个

B

乙

C

C

We now have our grid for medium to large devices (desktops). Now this is where we will have to add in the push and pull classes to accommodate the different order for mobile. Now we could add the push and pull classes here, but we have to make a quick adjustment first.

现在，我们有了适用于大中型设备（桌面）的网格。 现在，我们必须在其中添加push和pull类，以适应移动设备的不同顺序。 现在我们可以在此处添加push和pull类，但是我们必须先进行快速调整。

We must rearrange our HTML content to accommodate the B being above all the other content. This will move things for us so that we take more of the mobile first approach that is built into the Bootstrap grid. By rearranging our content, we now have:

我们必须重新排列HTML内容，以使B位于所有其他内容之上。 这将为我们带来帮助，以便我们采用更多内置在Bootstrap网格中的移动优先方法。 通过重新排列内容，我们现在具有：

<div class="row">
    <div class="col-md-4 col-md-push-4">
        <div class="alert alert-danger">B</div>
    </div>
    <div class="col-md-4 col-md-pull-4 col-sm-6">
        <div class="alert alert-info">A</div>
    </div>
    <div class="col-md-4 col-sm-6">
        <div class="alert alert-info">C</div>
    </div>
</div>

The grid is much easier to see this way since we now just have to add push and pull classes for medium devices and above. Our grid will now behave the way we expect! Go ahead and resize your browser and see how our grid works:

用这种方法可以更容易地看到网格，因为我们现在只需要为中型设备及以上设备添加推和拉类。 现在，我们的网格将按照我们期望的方式运行！ 继续调整浏览器的大小，看看我们的网格如何工作：

B

乙

A

一个

C

C

列重新排序的提示 (Tips for Reordering Columns)

Take the Bootstrap approach and create your content mobile first. It is easier to push and pull columns on larger devices than it is on smaller devices. This is why you should focus on your mobile ordering first, and then move up.

采用Bootstrap方法并首先创建移动内容。 在较大的设备上，推和拉色谱柱要比在较小的设备上更容易。 这就是为什么您应该首先专注于移动订购，然后再逐步升级的原因。

Here are a few more examples:

以下是一些示例：

See the Pen Column Reordering in Bootstrap by Chris Sevilleja (@sevilayha) on CodePen.

见笔列在引导重新排序由克里斯·Sevilleja（ @sevilayha上） CodePen 。

结论 (Conclusion)

With this simple technique, we are able to rearrange columns without too much fuss. I've seen some developers use hide and show classes to show different grids on small to large devices but these column reordering classes take care of all that for us.

通过这种简单的技术，我们可以重新排列列而不必大惊小怪。 我已经看到一些开发人员使用隐藏和显示类在小型到大型设备上显示不同的网格，但是这些列重新排序类为我们解决了所有这些问题。

For more on Bootstrap, take a look at our previous tutorials: Understanding the Bootstrap 3 Grid System and Bootstrap 3 Tips and Tricks You Might Not Know.

有关Bootstrap的更多信息，请看一下我们以前的教程： 了解Bootstrap 3网格系统和Bootstrap 3可能不知道的技巧 。

翻译自: https://scotch.io/tutorials/reorder-css-columns-using-bootstrap