How to change direction of popover bootstrap for phone?

Question

HTML

Guys, on the desktop, the popover direction should be to the right side (right), and on adaptive resolutions (tablet, phone) - down (bottom). How can this be implemented?

Answer 1

Add your styles, ala:

.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}
@media (min-width: 768px) {
  .text-right-md {
    text-align: right;
  }
  .text-left-md {
    text-align: left;
  }
}

Usage by analogy with bootstrap base classes
<p class="text-left text-right-md">...</p>