Bootstrap | Inline element inside same div

i have a <div class="col-md-12"></div> i want the two element stay on to text-align:left and another to the right, but i want, when the div is seen in mobile vision, that an element does not go below and one above but are aligned how can I do?

example:

<div class="col-md-12">
    <p style="text-align: left;" id="element_one">1</p>
    <p style="text-align: right;" id="element_two">1</p>
</div>

Solution

You need to use Bootstrap's Float class, not just aligning of the text element. In your case it will be:

<div class="row">
    <div class="col-md-6" style="background-color: aqua">
        <span class="float-md-left">1</span>
    </div>
    <div class="col-md-6" style="background-color: palevioletred">
        <span class="float-md-right">2</span>
    </div>
</div>

Live example:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-6" style="background-color: aqua">
      <span class="float-sm-left">1</span>
    </div>
    <div class="col-sm-6" style="background-color: palevioletred">
      <span class="float-sm-right">2</span>
    </div>
  </div>
</div>