Columns Options

Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system. Plus, see how to use column classes to manage the widths of non-grid elements.

How it Works

Heads up! Be sure to read the Grid page first before diving into how to modify and customize your grid columns.

Columns build on the grid’s flexbox architecture. Flexbox means we have options for changing individual columns and modifying groups of columns at the row level. You choose how columns grow, shrink, or otherwise change.
When building grid layouts, all content goes in columns. The hierarchy of Bootstrap’s grid goes from a container to a row to a column to your content. On rare occasions, you may combine content and column, but be aware there can be unintended consequences.
Phenix includes predefined classes for creating fast, responsive layouts. With five breakpoints and a dozen columns at each grid breakpoint, we have dozens of classes already built for you to create your desired layouts. This can be disabled via Sass if you wish.

Sorting & Order

Use flexbox flow sorting to reverse and define how the flow of the grid will go there is three classes to sort the flow [ .flow-reverse, .flow-columns, .flow-columns-reverse], which can be used to reverse columns order, you can also use .order-* to re-order each column individually by a number from 0 to 24.

Option	xSmall	Small	Medium	Large	xLarge
Breakpoint	> 0	> 576	> 768	> 1200	> 1366
Flow prefix	`flow-*`	`flow-sm-*`	`flow-md-*`	`flow-lg-*`	`flow-xl-*`
Order prefix	`order-*`	`order-sm-*`	`order-md-*`	`order-lg-*`	`order-xl-*`
Order Limit	24 columns	——	——	——	——

<!-- Flow Reverse -->
<div class="row flow-reverse">
    <!-- Column -->
    <div class="col-4">col n1</div>
    <!-- Column -->
    <div class="col-4">col n2</div>
    <!-- Column -->
    <div class="col-4">col n3</div>
    <!-- // Column -->
</div>
<!-- // Flow Reverse -->

<!-- Stacked Flow -->
<div class="row flow-columns">
    <!-- Column -->
    <div class="col-4">col n1</div>
    <!-- Column -->
    <div class="col-4">col n2</div>
    <!-- // Column -->
</div>
<!-- // Stacked Flow -->

<!-- Stacked Flow Reverse -->
<div class="row flow-columns-reverse">
    <!-- Column -->
    <div class="col-4">col n1</div>
    <!-- Column -->
    <div class="col-4">col n2</div>
    <!-- // Column -->
</div>
<!-- // Stacked Flow Reverse -->

Ordering Example

<!-- Ordering -->
<div class="row">
    <!-- Column -->
    <div class="col-4 order-5">order n1:n5</div>
    <!-- Column -->
    <div class="col-4 order-1">order n2:n1</div>
    <!-- Column -->
    <div class="col-4 order-4">order n3:n4</div>
    <!-- Column -->
    <div class="col-4 order-3">order n4:n3</div>
    <!-- Column -->
    <div class="col-4">order n5:none</div>
    <!-- // Column -->
</div>
<!-- // Ordering -->

Alignment

Use flexbox alignment utilities to vertically and horizontally align columns, Phenix comes with predefined alignment classes for flexbox grids that can be applied at any specific breakpoint, or through all breakpoints at once,

Responsive Classes

flexbox has 5 different values for alignment the classes are named with each of these values : [start, center, end, space-around, space-between], which set how columns are aligned inside the row container and here is a table for the class names pattern.

Feature	xSmall	Small	Medium	Large	xLarge
Breakpoint	> 0	> 576	> 768	> 1200	> 1366
Class Prefix	`align-*`	`align-sm-*`	`align-md-*`	`align-lg-*`	`align-xl-*`
Vertical prefix	`align-*-y`	`align-sm-*-y`	`align-md-*-y`	`align-lg-*-y`	`align-xl-*-y`
Horizontal prefix	`align-*-x`	`align-sm-*-x`	`align-md-*-x`	`align-lg-*-x`	`align-xl-*-x`
Self Alignment	`align-self-*`	`align-self-sm-*`	`align-self-md-*`	`align-self-lg-*`	`align-self-xl-*`

Alignment All [x/y]

Use flexbox alignment utilities to vertically and horizontally align columns.