html - hiding display using bootstrap -

i tried below code display in different ways in mobile , desktop. both sentences displaying @ same time.

<div>     <div class="hidden-xs hidden-lg hidden-sm visible-md">           page-under-construction.please-try-again-later.       </div>       <div class="hidden-md hidden-lg visible-xs">           page-under-construction.       </div> </div>   

to expand on other 2 answers:

• do use hidden or visible on single element (as mentioned)
• be aware visible-* deprecated now. instead, there should display property @ end. example visible-md-block . see thread: hiding elements in responsive layout?

here's plunker using code provided: http://plnkr.co/edit/brjpcsh578wgu5eq1rwl?p=preview

<div class="hidden-xs hidden-sm">     page-under-construction. please-try-again later. </div>   <div class="hidden-md hidden-lg">       page-under-construction.   </div>