Using twitter-bootstrap to position divs on larger devices in a 2 column 'newspaper like' order -


i position div elements using twitter-bootstrap on smaller device, divs appear in order demonstrated:

small screen:

|1| |2| |3| |4|

larger screen:

|1|3| |2|4|

i though pull-left , pull-right classes might trick, no luck:

<div class="row">     <div class="well well-lg clearfix">         <div class="col-xs-12 col-md-6 pull-left">             <div class="alert alert-success">1</div>         </div>         <div class="col-xs-12 col-md-6 pull-left">             <div class="alert alert-warning">2</div>         </div>         <div class="col-xs-12 col-md-6 pull-right">             <div class="alert alert-info">3</div>         </div>         <div class="col-xs-12 col-md-6 pull-right">             <div class="alert alert-danger">4</div>         </div>     </div> </div>

there jsfiddle here

typically re-order bootstrap columns on different views should use column ordering col-xx-push-* , col-xx-pull-* modifier classes.

source: http://getbootstrap.com/css/#grid-column-ordering

however you're trying re-order columns overflow in same row (ie using row display 2 rows of columns) not work. might need extend current bootstrap columns , add flex-box support better column ordering.

as seen here: (at 4:10) https://www.youtube.com/watch?v=0i7xb22zzqm

so example, following code used reset column order (having arranged [ 1 3 2 4] in code already):

@media (max-width: 992px){     .flex-row {         display:flex;         flex-direction:row;         flex-flow: column;         width: 100%;     }     .col-1 {       order: 1;     }     .col-2 {       order: 2;     }     .col-3 {       order: 3;     }     .col-4 {       order: 4;     } }

complete fiddle here: http://jsfiddle.net/7w90ftkc/


Comments

Post a Comment

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

i working on custom magento extension. working around adminhtml part , i've created custom form there. here form code: <?php class vivasindustries_smsnotification_block_adminhtml_sms_sendmass_edit_form extends mage_adminhtml_block_widget_form { public function _preparelayout() { $extensionpath = mage::getmoduledir('js', 'vivasindustries_smsnotification'); $head = $this->getlayout()->getblock('head'); $head->addjs('jquery.js'); $head->addjs('vivas.js'); return parent::_preparelayout(); } protected function _prepareform() { $form = new varien_data_form(array( 'id' => 'edit_form', 'action' => $this->geturl('*/*/save', array('id' => $this->getrequest()->get...
Read more

php - Bypass Geo Redirect for specific directories -

i'm trying bypass redirect specific url within site. wondering if might able help. the code below code use, original urls replaces example.com i'd able access http://example.com/admin without redirect occuring. is there way this, , there way using own ip? function country_geo_redirect() { $country = getenv('http_geoip_country_code'); if ($country == "us" ) { wp_redirect("http://usa.example.com/"); exit; } else if ($country == "gb" ) { wp_redirect("http://uk.example.com/"); exit; } } add_action('init', 'country_geo_redirect'); you can bypass redirection code if server found ip address. if ip address == <my ip address> ' nothing here else country_georedirect() end if
Read more

php - .htaccess mod_rewrite for dynamic url which has domain names -

i want convert url ex:( example.com/link.php?url=facebook.com ) ( example.com/facebook.com.php ) how can using .htaccess. or there other process make job easier ? i tried adding script .htaccess file options +followsymlinks rewriteengine on rewriterule url-(.*)\.htm$ link.php?url=$1 but converting url adding "url-" ( example.com/url-facebook.com.php ) i want remove "url-" , want make ( example.com/facebook.com.php ) rewriteengine on rewritecond %{the_request} ^get.*link\.php\?url\= [nc] rewritecond %{request_uri} !/system/.* [nc] rewriterule (.*?)link\.php\?url\=/*(.*) /$1$2 [r=301,ne,l] not sure how above work edit of used use remove index.php url
Read more