目前正在使用線上課程自學，但遇到問題無法解決，丟了ChatGPT也無法理解，可能問題真的非常基礎，再麻煩前輩們能撥空指導。
使用的是bootstrap格線系統。
codepen如下↓
https://codepen.io/mini7er/pen/KKJXEgr

我的問題：想在不改變語法結構的狀況下(可以增加新的class)，將左邊的圖片往右移5個格線，右邊的文字往左移5個格線系統，並且能夠維持在同一行上。
因為目前線上教學希望我們能用這種方式移動col，所以才有此一問。

我做過的嚐試：
1)利用現在的bootstrap裡面的offset-md-5跟col-md-6放在一起，沒有辦法維持照片跟文字在同一行。
2)試著額外新增了一個postion的class，去移動文字欄位，勉強可以左右對調，但如果我把文字欄位的col-md-6改成col-md-4的時候，一樣會跑版。

我自己的想法：因為bootstrap的格線系統使用的是flex，所以一但兩個col加起來超過100%就是會換行，但我不曉得要怎麼拯救它...再麻煩各位前輩們了

謝謝你告訴我bootstrap還有“flex-row-reverse"這個語法可以使用，我真的不夠熟悉，你告訴我了我才知道
然後因為我想要盡量簡潔一點的去移動col讓他們兩個能夠位置相反並且重疊，你給我的建議讓我有了一些新的想法，後來我直接在兩個col裡面各加了一個向左推擠及向右推擠的col，並且給他們定義了postion: relative;

我最終想要的結果如下↓
https://codepen.io/mini7er/pen/KKJXEgr

想冒昧請問一下，我看過你codepen幫我重整的版面，好像沒有新增什麼但卻讓我的版面看起來很整齊(閱讀舒適) 是我忽略了codepen的什麼排版功能嗎?