bootstrap içeriği nasıl sağ sabitleyeceğim? +R10

Kod yapım aşağıdaki şekilde çıktısı ise kodun altına yer alıyor;

<li class="d-flex justify-content-between mb-2 pb-2 border-bottom"><span><i class="fas fa-user m-r-xxs"></i> Rütbe:</span>                    
<p>
                                <?php if ($permList): ?>
                                <?php foreach ($permList as $item):
                                    echo YONC::getPerm($item, 'icon');
                                endforeach; ?>
                                <?php else: ?>
                                  <span class="badge bg-danger">  YOK </span>
                                <?php endif; ?>
  </p>

</li>

Bunu üstteki(son görülme: çevrimiçi) gibi sağ yatırmak istiyorum. Mobil olunca column olsun yani alt alta sıralansınlar ama masaüstünde yan yana en fazla 3 tane gözüksün istiyorum ama ne denediysem yapamadım. Hangi kodu eklemeliyim?
Tek başına olduğunda veya 2-3 tane olduğunda görüntü sorunsuz ama 4-5 tane olunca bir anda bozuluyor.

class=“d-flex flex-column flex-lg-row”

https://getbootstrap.com/docs/4.0/ut...lex/#direction

Maalesef işe yaramadı hocam, şu şekilde bir ekleme yaptım konumlandırmayı tam istediğim gibi yapmayı başardım ancak sağ tarafı nasıl daraltabilirim bulamadım. (div class="text-end">)

----------<div class="text-end">--------------
                                <?php if ($permList): ?>
                                <?php foreach ($permList as $item):
                                    echo YONC::getPerm($item, 'icon');
                                endforeach; ?>
                                <?php else: ?>
                                  <span class="badge bg-danger">  YOK </span>
                                <?php endif; ?>
------ </div>--------

her ögeyi col içerisine alırsan kontrol etmen daha rahat olmaz mı?

<div class="container">
  <div class="row">
    <div class="col-sm">
     burası içerik alanı
    </div>
    <div class="col-sm">
      burası içerik alanı
    </div>
    <div class="col-sm">
       burası içerik alanı
    </div>
  </div>
</div>

bunu denediğinde büyük ekranda yan yana 3 kolon görürsün. küçük ekranda alt alta geçer hepsi. yazıyı end ya da center yapabilirsin.

Yok hocam saçma sapan bir şey oluyor öyle yapınca.

edit: <span class="d-flex"><i class="fas fa-user m-r-xxs"></i> Rütbe:</span> şu şekilde span arasına d-flex ekleyince o rütbe kayması geçti.

konu başlığını açan arkadaşın anlayışını umarak bir şey söylemek istiyorum.daha önce bir kaç arkadaşa söyledim ama cevap yazmadılar.meslek sırrı yada ücretli yapılıyor galiba dönüş yapmadılar. yada ücretli üyelik olmadığı için hakkım yok sanırım. tamamen bilmediğim için söylüyorum.

arkadaşın paylaştığı siyah arka planlı kodlama şablonunu örnek alarak; imzamdaki yazıyı o şekilde yapmak istiyorum.bu mümkünmü.yani imzama koyabilme iznim varmı.