There are a lot of ways to shuffle the DOM around between breakpoints.
I've used this javascript library to move blocks of markup between viewport
sizes before:
http://wicky.nillia.ms/enquire.js/
It adds media query support to JS, letting you call custom functions on and
off whatever viewport rules suite your need. Works great in scenarios just
like this one.
- - - -
Basic usage is simple like...
// Move PageNav and PageContent
Brand.OrderNavContent = function(selector1, selector2) {
return jQ(selector1).after(jQ(selector2));
}
jQ(document).ready(function() {
// JS Media Queries
enquire
// Large
.register("screen and (min-width: 1200px)", {
match : function() {
Brand.OrderNavContent('div#page-nav', 'div#page-content');
// Small
.register("screen and (min-width: 768px) and (max-width:991px)", {
match : function() {
Brand.OrderNavContent('div#page-content', 'div#page-nav');
.....
Cheers,
- EL
On Fri, Oct 30, 2015 at 11:50 AM, Aeschleman, Luke <[log in to unmask]>
wrote:
> If you duplicate the block (even if it's hidden) it will load the content
> twice. Not a huge deal if it's static HTML, but if it's a lot of
> promotional images, this could slow down load times.
>
> I found this that might help
> http://tanalin.com/en/articles/css-block-order/
>
> In theory, use media queries to adjust the display of the content divs.
> When the viewport gets to mobile size, you'd add display:table to the
> wrapper (containing x,y,z,1,2,3), display: table-row-group to divs
> x,y,z,1,3, and display: table-header-group to div 2. (Doesn't work for ie
> <=8, fyi).
>
> Another option is moving the content around with javascript or jquery
> clone.
>
> Personally, I'd prefer a purely CSS solution. If the display:table
> solution doesn't work out, I'd fall back to hiding duplicate content over
> javascript.
>
> Hope that helps!
>
> Cheers,
>
>
> Luke Aeschleman
> Web / Database Development Librarian
> UNC Chapel Hill Health Sciences Library
> CB #7585
> Chapel Hill, NC 27599
> 919.966.7637
> [log in to unmask]
> http://library.ncahec.net
>
>
>
> -----Original Message-----
> From: Code for Libraries [mailto:[log in to unmask]] On Behalf Of
> Kaile Zhu
> Sent: Friday, October 30, 2015 11:04 AM
> To: [log in to unmask]
> Subject: Re: [CODE4LIB] CSS positioning expertise needed
>
> We don't know what framework the designer uses. Likely proprietary,
> modified based on some open sources. So, it is hard for anyone to do some
> customization, if the hired designer is unwilling to help you.
>
> To me, the easiest way to achieve your goal is to embed some code to
> detect the viewing device; if desktop, show as is; if mobile, redirect to
> the similar page with 2 on the top. Visitors don't care you actually
> provide a different page, or they may not even notice that.
>
> Kelly Zhu | Head of Systems
> James C. Jernigan Library
> Texas A&M University - Kingsville
> phone: 361.593.4082
>
>
>
> -----Original Message-----
> From: Code for Libraries [mailto:[log in to unmask]] On Behalf Of
> Kyle Breneman
> Sent: Friday, October 30, 2015 9:25 AM
> To: [log in to unmask]
> Subject: Re: [CODE4LIB] CSS positioning expertise needed
>
> Thanks so much to all who responded! As I said before, I was reluctant to
> share the full context with the list because I didn't want to share the
> in-house mock-ups I've received with the entire list. Here's a summary of
> the question and answers received:
>
> Context: Our library homepage is being redesigned to responsively resize.
> The work is being done by an outside design firm. Imagine that our
> homepage content looks like this, where x, y, z and 1, 2, 3 are all
> distinct blocks of content on our homepage.:
>
> X Y Z
> 1 2 3
>
> When this homepage responsively resizes for smaller screens, the content
> arranges in a column, as below:
>
> X
> Y
> Z
> 1
> 2
> 3
>
> Problem: "2" is a space where we often post graphics to market upcoming
> library events, so we wanted "2" to appear at the very top of our page, in
> mobile view (as below),
>
> 2
> X
> Y
> Z
> 1
> 3
>
> but the outside design company told us that this wouldn't be possible.
> They said: "It’s really a coding issue. When building a page with
> responsive design in mind, the code is going to stack elements almost like
> reading a book - top to bottom, left to right to fit the mobile view . . .
> We have ["2"] almost at the “end” of content on desktop and sandwiched
> between to other elements, to pull that up as the very first item for
> mobile presents issues and may cause the transition between desktop and
> mobile to break."
>
> Answers received: Multiple people suggested creating a duplicate version
> of "2," wrapped in a div and at the top of all of our other homepage
> content, and using media queries to either display or hide this div,
> depending on the user's screen size. Additionally, we would use media
> queries to hide the original "2" div when in mobile view.
>
> Much gratitude to Matt Sherman, Jason Bengtson, Marya Sawaf, Cary Gordon,
> Heather Rayl, Andy Wagner, Lisa Haitz, and Michael Schofield for their
> helpful responses!
>
> Regards,
> Kyle
>
>
>
> On Thu, Oct 29, 2015 at 11:21 AM, Kyle Breneman <[log in to unmask]>
> wrote:
>
> > Our library is currently working with the public relations department
> > at our university to complete a responsive redesign of the library
> website.
> > The redesign is being driven by the PR department, who is contracting
> > with an outside design firm for all of the actual coding.
> >
> > We'd like to make some changes to the order in which our homepage
> > content displays when our site responsively resized for mobile, but
> > we're being told that the changes we want are not possible. I'm
> > pretty certain that what we want can be achieved by CSS positioning,
> > but I'd welcome responses, off-list, where I can share more details
> > and get a better understanding of what code would be needed to achieve
> our objectives.
> >
> > Regards,
> > Kyle Breneman
> > Langsdale Library
> > University of Baltimore
> >
>
--
Eric Larson
Web Architect and User Experience Analyst
University of Minnesota Libraries
612-624-5332
