Skip to main content

How to display two columns of text side-by-side if on desktop or stacked if on a mobile device?

I have the same situation with displaying an image with a label/text to the right or below, depending on screen width. I have created a custom theme based on CitiZen, with slight modifications. I cannot seem to find how to do this within the NB documentation or existing theme styles/code.

Official response from

NationBuilder stock themes (and therefore any custom themes that are based off of NationBuilder stock themes) have classes that are pre-defined via the theme's stylesheets that will help you do this. Specifically, you can create a "row" container using a div with the class "row-fluid" and then you can create divs inside of this and control what percentage of the row they take up using the following classes:


  • span1
  • span2
  • span3
  • span4
  • span4
  • span6
  • span7
  • span8
  • span9
  • span10
  • span11
  • span12


When viewed on a desktop, a div with the class span6 would take up half of a row, a div with the class span12 would take up a whole row, etc.. But when you view it on a mobile device, each span class is set to take up the whole width of the row.

So to answer your question, you could use this to create two columns that are side-by-side on desktop but stacked on mobile:

<div class="row-fluid">

<div class="span6">LEFT COLUMN

<div class="span6">


Here's more on that on diff checker - 

Share this post

Showing 6 reactions

How would you tag this suggestion?
Please check your e-mail for a link to activate your account.