responsive design - Div re-order with CSS -

-

does know of examples or tutorials on how achieve below:

on desktop layout be: desktop layout

on mobile layout change to: mobile layout

as can see, want box 2 , box 3 re-order , swap positions on mobile

does have tips or advice?

depending on browsers need support use flex-box. using media query screen size set order of second , third boxes switch below screen width.

i've done pen short example. i'd recommend css tricks complete guide flexbox talks how use flex far better can.

edit:

the basic principle set parent element (e.g., container) display: flex ; generates flexbox , allows set different parameters children.

using following html:

<div class="container">   <div class="box first">     box 1   </div>   <div class="box second">     box 2   </div>   <div class="box third">     box 3   </div> </div>

if set display:flex on .container, can set whether content should display in row or column, should wrap down line, have space between or around elements, etc. i've set main rule wrapping row using flex-flow (which shorthand 2 other flex properties, including flex-direction need later), space between elements.

.container{   display:flex;   flex-flow: row wrap;   justify-content:space-between; }

i use media query when browser narrower specified width, flex-direction gets changed row column

@media screen , (max-width:600px){   .container {     flex-direction:column   }  }

then, in same media query, need tell elements want re-order order should in:

@media screen , (max-width:600px){   .container {     flex-direction:column   }   .second{     order: 3;   }   .third{     order: 2   } }

sometimes i've noticed order needs defined elements, might need set first block , keep order: 1 . pen linked above, doesn't seem case here, keep eye out in other projects.


Comments

Post a Comment

Popular posts from this blog

apache - setting document root in antoher partition on ubuntu -

-
i place apache document root inside partition of ubuntu hard drive, keep getting forbidden message, when place home directory woking find, how be? group or owner affected ? here mysite.conf , apache2.conf when place document root in home folder (working) #site-available/mysite.conf documentroot /home/jono/www #/etc/apache2/apache2.conf <directory /home/jono/www/> options indexes followsymlinks allowoverride none require granted </directory> bu when change document root partition keep getting forbidden messasge #site-available/mysite.conf documentroot /media/jono/website_data/www #/etc/apache2/apache2.conf <directory /media/jono/website_data/www/> options indexes followsymlinks allowoverride none require granted </directory> is owner/group access affected ? or there problem ? at last it's working, have grant access www:data accesing whole directory @mark-b, using chown -r www-data:www-data whole directory is...
Read more

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -

-
i trying add nodes dagre graph through cityscape.js. problem nodes not painted. code have: cy.add({ group: "nodes", data: { id:"n0",name:"n0",weight: 75 }, }); $.ajax(url).done(function(jsontree){ var newnodes=[]; for(var i=1;i<6;i++){ //var child = jsontree.result[i]; newnodes.push( { group: "nodes", data: { id: "n"+i, name:"n"+i}}, { group: "edges", data: { id: "e"+i, source: "n0", target: "n"+i } } ); } cy.add(newnodes); any ideas? have used loaded function reload graph not work. not know if have use specific function reload graph. thank in advance. you need add positions new nodes. cytoscape.js docs : it important note positions of newly added nodes must defined when calling cy.add(). nodes can not placed in graph without valid position — otherwise not displayed. yo...
Read more

php - laravel retrieving profile firstname from model returns Object of class Illuminate\Database\Eloquent\Builder could not be converted to string -

-
hi passing user_id user model , joining profile table retrieve first name of user so: public function scopefirstnamebyuserid($id) { return static::where('users.id','=',$id)->join('profiles', function ($join,$id) { $join->where('profiles.user_id', '=', $id); })->pluck('firstname'); } usage: user::firstnamebyuserid(2); however following error: missing argument 2 user::{closure}() edit# the function has been updated to: public function scopefirstnamebyuserid($id) { return static::where('users.id','=',$id)->join('profiles',function ($join) use ($id) { $join->where('profiles.user_id', '=', $id); })->pluck('firstname'); } but throws error: object of class illuminate\database\eloquent\builder not converted string any ideas i'm doing wrong? in...
Read more