Creating a responsive divider (vertical/horizontal) in Bootstrap

Question

I'm struggling a bit with creating a responsive divider in Bootstrap. By responsive divider I mean a divider which is vertical on large screens and horizontal on smaller screens.

Vertical divider:

Horizontal divider:

Answer 1

This has to be done using a class which can change with media queries. Check this link out for a solution http://www.bootply.com/cwvl8JaIEi. Its basically what you have already with a few additions as follows:

1. A class for the line
2. media queries

.sepText {
    background: #ffffff;
    margin: -15px 0 0 -38px;
    padding: 5px 0;
    position: absolute;
    left: 43%;
    text-align: center;
}
hr{-webkit-transform: translate(-45px, -11px) rotate(90deg) scale(0.8);
    -ms-transform: translate(-45px, -11px) rotate(90deg) scale(0.8);
    transform: translate(-45px, -11px) rotate(90deg) scale(0.8);}

@media only screen and (max-width: 999px) {
   hr{
       -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    }
   .sepText {
    left: 50%;
    top:50%
	}
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
        <div class="col-md-5">
                <h2>Lorem ipsum</h2>
                <p>blah blach hery asd
  ad a dsasdadjaudn dadas asd ads a da d ad ad a d ad ad a d<br>asd ads asd da da da  dada
                </p>
        </div>
        <div class="col-md-2">
            
            <div class="sep">
                <hr><div class="sepText">
                    OR
                </div>
            </div>
         
        </div>
        <div class="col-md-5">
                <h2>Lorem lorem</h2>
                <p>ok ok ok</p>
        </div>
</div>