[Theme: The Bootstrap] Two columns in phone layout

Hi stemie,

it probably is, but you’d have to overwrite a lot of core Bootstrap styles in a media query to do that. When the width is under 480px, they set all spans to width: 100%.

Konstantin

Ok thanks, dont really want to overwrite any core.

If you do it in a Child Theme’s style.css file, it’s all good. With ‘overwrite’, I mean defining styles that supersede the ones defined by Bootstrap.

Ok thanks, I am using a child theme.

In my child css I added:

@media (max-width: 480px) {

.span2 {width:50%;float:left;}

}

To get the two columns I’ve ended up running a loop twice though but that seems like a waste of resources? Is there anyway it can load the loop once depending on if .visible-phone or .hidden-phone is being shown?

<div class="span2 hidden-phone">
<?php
$args = array( );
$postslist = get_posts( $args );
foreach ($postslist as $post) :  setup_postdata($post); ?> 

// stuff

<?php endforeach; ?>
</div><!-- .span2 hidden-phone-->

<div class="row visible-phone">
<div class="span4">
<?php
$args = array( );
$postslist = get_posts( $args );
foreach ($postslist as $post) :  setup_postdata($post); ?> 

<div class="span2">
//stuff
</div>

<?php endforeach; ?>
</div><!-- .span4 -->
</div><!-- .row visible-phone -->

Why don’t you use the regular markup and just style it differently when the viewport width is below 480px?

Im not sure I understand.

I made a mess of it by trying it this way without duplicating the loop.

<div class="row">
<div class="span2 hidden-phone">
<div class="row visible-phone">
<div class="span4">
<?php
$args = array( );
$postslist = get_posts( $args );
foreach ($postslist as $post) :  setup_postdata($post); ?>
<div class="span2">
//stuff
</div>
<?php endforeach; ?>
</div><!-- .span4 -->
</div><!-- .row visible-phone -->
</div><!-- .span2 hidden-phone-->