javascript - Swap divs (rows) only in tablet view -

-

i have 2 basic divs display side side in bootstrap layout. in using mobile first, have search panel div display first, followed div. in desktop mode, using push/pull correctly first div go right.

in middle view, tablet view, divs stacked, want swap order. i've created bootply: http://www.bootply.com/i8iuuyntwk#

in summary:

mobile:    [search]    [slideshow]  tablet:    [slideshow]    [search]  desktop:    [slideshow] [search]   <div class="container">     <div class="row">         <div id="search_div" class="col-md-3 col-md-push-9">             search form here (this should on right on desktop, on top mobile, , second tablet)         </div>         <div id="slideshow_div" class="col-md-9 col-md-pull-3">             slide show here  (this should on left desktop, second mobile , on top tablet)         </div>     </div> </div>

i've seen dozens of ways attempt far seem odd, not clean. i'd rather not duplicate divs , hide show.

you can reorder them in tablet screen size using flex reordering. check compatibility table flexbox

  1. include @media (min-width: 768px) , (max-width: 992px) target tablet screen size width.

  2. use custom class row avoid affecting rows.

  3. make sure flex-direction set column stacking effect.

#search_div {    background: yellow;    padding: 30px;  }  #slideshow_div {    background: red;    padding: 40px;  }  @media (min-width: 768px) , (max-width: 992px) {    .reorder {      display: flex;      flex-direction: column;    }    #search_div {      order: 2;    }    #slideshow_div {      order: 1;    }  }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />  <div class="container">    <div class="row reorder">      <div id="search_div" class="col-md-3 col-md-push-9">        search form here (this should on right on desktop, on top mobile, , second tablet)      </div>      <div id="slideshow_div" class="col-md-9 col-md-pull-3">        slide show here (this should on left desktop, second mobile , on top tablet)      </div>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

c# - Store DBContext Log in other EF table -

-
i want store logs in db table (imported ef code). my code looks this: public pmcontext() : base("myentities") { configuration.proxycreationenabled = false; configuration.lazyloadingenabled = false; this.database.log = s => logstore(s); } private void logstore(string message) { tlog log = new tlog(); log.description = message; log.insertdate = datetime.now; logs.add(log); savechanges(); } public virtual dbset<tlog> logs { get; set; } i cannot use savechanges() (get error "sqlconnection not support parallel transactions") , if remove line nothing stored in db table. how can fix this? i think happens during savechanges call anywhere in app, because sql generated call logged, triggers nested savechanges call tries start own transaction. and there thing: savechanges call in logstore method trigger logging itself, you'd end starting infin...
Read more

javascript - Karma not able to start PhantomJS on Windows - Error: spawn UNKNOWN -

-
i lost "unknown" error: karma.conf.js: frameworks: ['mocha', 'should'], plugins: ['karma-mocha', 'karma-should', 'karma-phantomjs-launcher'], ... browsers: ['phantomjs'], error: 23 07 2015 14:35:37.691:warn [karma]: no captured browser, open http://localhost:9876/ 23 07 2015 14:35:37.701:info [karma]: karma v0.13.3 server started @ http://localhost:9876/ 23 07 2015 14:35:37.707:info [launcher]: starting browser phantomjs 23 07 2015 14:35:37.738:error [karma]: { [error: spawn unknown] code: 'unknown', errno: 'unknown', syscall: 'spawn' } error: spawn unknown @ exports._errnoexception (util.js:749:11) @ childprocess.spawn (child_process.js:1093:11) @ exports.spawn (child_process.js:933:9) @ object._execcommand (c:\users\jinga4x\git\mdl-sample-project\node_modules\karma\lib\launchers\process.js:63:21) @ object._start (c:\users\jinga4x\git\md...
Read more

Nuget pack csproj using nuspec -

-
i want create nuget package contains specified in nuspec file, still version csproj. in order use token have pack like: nuget pack myproj.csproj but when adds dependencies , creates unwanted folder in nuget package. nuspec file is: <?xml version="1.0" encoding="utf-8"?> <package xmlns="http://schemas.microsoft.com/packaging/2011/08/nuspec.xsd"> <metadata> <id>test</id> <version>$version$</version> <title>test</title> <authors>test</authors> <owners>test</owners> <requirelicenseacceptance>false</requirelicenseacceptance> <description>test</description> <summary>test</summary> <releasenotes>test</releasenotes> <copyright>test</copyright> </metadata> <files> <file src="bin\debug\*.dll" target="lib\net45" /> <file s...
Read more