How to make a span go through 2 container divs - html

Question

How to make a span with sticky element float through 2 bootstrap's container divs?
Right now I couldn't make the span element stick on top of the container div, the container will always stay below of the span element. Also, When shrink into mobile view, I would like to have content 1 stay above then follow by span element with image then lastly is content 2. Each of the container has a background-image with it, so I want the span element can move up and down through 2 containers. Thank you so much in advance.
This is what I expected result:
Here is the jsfiddle link: https://jsfiddle.net/oafwmghd/2/
#sticky {
position: -webkit-sticky;
position: sticky;
display: flex;
display: -ms-flex;
display: -webkit-flex;
justify-content: center;
margin-top: 30px;
padding-bottom: 80px;
top: 0;
z-index: 1;
}
<div class="container">
<span><img
src="https://previews.123rf.com/images/sooolnce/sooolnce1611/sooolnce161100038/66323541-realistic-plastic-bottle-for-water-on-a-transparent-background-vector-illustration.jpg"
width=20% height=50% id="sticky"></span>
<section>
<div class="container" style="height:500px; background-color: green;">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-0">
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
Content 1
</div>
</div>
</div>
</section>
<section>
<div class="container" style="height:500px; background-color: red;">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-0">
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
Content 2
</div>
</div>
</div>
</section>
</div>

Answer 1

You might not need these empty elements if you use margin-left:auto (class : ml-auto).
To reorder elements, you need a flex or a grid container , you may reset container to a column flex box (class : d-flex flex-column)
There is nor ordering responsive class (as much as i know), you may create the classes and the breaking point you need and remove t the same time the sticky behavior.
A negative margin or absolute position could be used to avoid image pushing the content down . let's try with position or margin.
An approach could be :
#sticky {
position: -webkit-sticky;
position: sticky;
display: flex;
display: -ms-flex;
display: -webkit-flex;
justify-content: center;
margin-top: 30px;
width: 50%;
top: 1em;
z-index: 1;
margin-left: 0;
border: 0;
order: -1
}
#sticky img {
position: absolute;
}
#media (max-width: 768px) {
.order-sm-1 {
order: 1;
}
#sticky.order-sm-2 {
order: 2;
}
#sticky img {
position: static;
}
.order-sm-3 {
order: 3;
}
#sticky {
position: static;
margin: auto;
width: auto;
}
}
/* demo purpose*/
section {
border: solid;
margin-bottom: 1em;
}
.row .ml-auto {
min-height: 300px;
background: green;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container d-flex flex-column">
<section class="row col-lg-6 col-md-6 col-sm-12 order-sm-2" id="sticky"><img src="https://images.containerstore.com/catalogimages/318610/ColoredStopperBottlesClear_x.jpg?width=1200&height=1200&align=center" width=80%></section>
<section class="order-sm-1">
<div class="container">
<div class="row">
<!--<div class="col-lg-6 col-md-6 col-sm-0"></div>-->
<div class="col-lg-6 col-md-6 col-sm-12 ml-auto">
<p><b>Play the snippet in full page mode and resize the window to checkout the behavior</b></p>
</div>
</div>
</div>
</section>
<section class="order-sm-3">
<div class="container">
<div class="row">
<!--<div class="col-lg-6 col-md-6 col-sm-0"></div>-->
<div class="col-lg-6 col-md-6 col-sm-12 ml-auto">
Content 2
</div>
</div>
</div>
</section>
</div>
follow up from comment :
#sticky {
position: -webkit-sticky;
position: sticky;
display: flex;
display: -ms-flex;
display: -webkit-flex;
justify-content: center;
margin-top: 30px;
width: 30%;
top: 4em;
z-index: 1;
margin-left: 0;
border: 0;
order: -1;
flex: 0 0 auto;
}
#sticky img {
position: absolute;
}
#media (max-width: 768px) {
.order-sm-1 {
order: 1;
}
#sticky.order-sm-2 {
order: 2;
}
#sticky img {
position: static;
}
.order-sm-3 {
order: 3;
}
#sticky {
position: static;
margin: auto;
width: auto;
}
}
/* demo purpose*/
section {
border: solid;
margin-bottom: 1em;
}
.row .ml-auto {
min-height: 200px;
background: green;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="container d-flex flex-column p-0">
<section class="row col-lg-6 col-md-6 col-sm-12 order-sm-2" id="sticky"><img src="https://images.containerstore.com/catalogimages/318610/ColoredStopperBottlesClear_x.jpg?width=1200&height=1200&align=center" width=80%></section>
<section class="order-sm-1">
<div class="container">
<div class="row">
<!--<div class="col-lg-6 col-md-6 col-sm-0"></div>-->
<div class="col-lg-6 col-md-6 col-sm-12 ml-auto">
<p><b>Play the snippet in full page mode and resize the window to checkout the behavior</b></p>
</div>
</div>
</div>
</section>
</div>
<section class="order-sm-3">
<div class="container">
<div class="row">
<!--<div class="col-lg-6 col-md-6 col-sm-0"></div>-->
<div class="col-lg-6 col-md-6 col-sm-12 ml-auto">
Content 2
</div>
</div>
</div>
</section>
</div>
<div class="container">
<section>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 ml-auto">
Content 3
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 ml-auto">
Content 4
</div>
</div>
</div>
</section>
</div>

Answer 2

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<style>
.row.one{
align-items: stretch;
justify-content: center;
display: flex;
}
.col-lg-6 { width:50%;}
.col-lg-12 { width:100%;}
</style>
<section>
<div class="container">
<div class="row one">
<div class="col-lg-6 col-md-6 col-sm-12" style="background:#006;padding:50px 0;">
Content 1
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12" style="background:#993;padding:50px 0;">
Content 2.1
</div>
<div class="col-lg-12 col-md-12 col-sm-12" style="background:#3FC;padding:50px 0;">
Content 2.2
</div>
</div>
</div>
</div>
</div>
</section>
Hope so this will work for you

Answer 3

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<style>
.row.one{
align-items: stretch;
justify-content: center;
display: flex;
}
.col-lg-6 { width:50%;}
.col-lg-12 { width:100%;}
</style>
<section>
<div class="container">
<div class="row one">
<div class="col-lg-6 col-md-6 col-sm-12" style="background:#006;padding:50px 0;">
Content 1
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12" style="background:#993;padding:50px 0;">
Content 2.1
</div>
<div class="col-lg-12 col-md-12 col-sm-12" style="background:#3FC;padding:50px 0;">
Content 2.2
</div>
</div>
</div>
</div>
</div>
</section>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<style>
.row.one{
align-items: stretch;
justify-content: center;
display: flex;
}
.col-lg-6 { width:50%;}
.col-lg-12 { width:100%;}
</style>
<section>
<div class="container">
<div class="row one">
<div class="col-lg-6 col-md-6 col-sm-12" style="background:#006;padding:50px 0; background:url(https://www.nationalgeographic.com/content/dam/travel/rights-exempt/2018-travel-photographer-of-the-year/magical-mountains/dawn-vestrahorn-iceland-mountains.jpg); background-size:cover;">
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12" style="background:#006;padding:50px 0; background:url(https://www.dw.com/image/48396304_303.jpg); background-size:cover;">
</div>
<div class="col-lg-12 col-md-12 col-sm-12" style="background:#006;padding:50px 0; background:url(https://amp.businessinsider.com/images/5ac3bdf57a74af1b008b4612-960-480.jpg); background-size:cover;">
</div>
</div>
</div>
</div>
</div>
</section>
Hop so this will help you